I'm trying to create to create two diagonal curved lines with CSS.

What I'm trying to create:

What I've achieved so far:

I've attempted this using a border, my code so far:

.bottom-circle {
  width: 45%;
  height: 50px;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  border-left: 2px dashed #c6c6c6;
  border-right: 2px dashed #c6c6c6;
  margin: 0 auto;
}

<div class="bottom-circle"></div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I've spent a few hours trying to fix this but with no luck so far. I'm wondering how I could do this in the simplest way possible? Thanks

CodePudding user response：

you can create a full circle inside of a div with ::before and hide half of it with overflow hidden like this

.bottom-circle {
  width: 400px;
  height: 50px;
  position:relative;
  overflow:hidden;
  margin: 0 auto;
}
.bottom-circle:before{
  content:'';
  position:absolute;
  top:-300px;
  left:0;
  width:400px;
  height:400px;
  border-radius:100%;
  border: 2px dashed #c6c6c6;
  box-sizing:border-box
 }

<div class="bottom-circle">

</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>