need to make curve line using css

Question

I am trying to create curve line like this using css:

this to make it curve, but not able to do.or is it possible to make one border solid line to make it curve like this? Thanks in Advance.. any one can help me out

My code: http://codepen.io/elad2412/pen/PwWjLL

.box{
  width:500px; height:100px;  
  border:solid 5px #000;
  border-color:#000 transparent transparent transparent;
  border-radius: 50%/100px 100px 0 0;
}

i am using this http://codepen.io/elad2412/pen/PwWjLL as reference, but can able to make it curve. — mammam, Mar 25 '17 at 09:47
i add one reference codepen, i was trying out, got codepen from reference question. its not two circles. its a border line i need to make it curve, is that possible?? — mammam, Mar 25 '17 at 09:51
no i can not use svg, path, i need by css, is this possible? — mammam, Mar 25 '17 at 09:52

score 7 · Accepted Answer · answered Mar 25 '17 at 09:54

Try this:

.wave {
  width: 800px;
  height: 200px;
  position: relative;
}

.wave:after {
    content: '';
    width: 50%;
    position: absolute;
    height: 200px;
    display: block;
    border-bottom: 19px solid black;
    border-radius: 50%;
    left: 50%;
}

.wave:before {
    content: '';
    width: 50%;
    position: absolute;
    height: 200px;
    display: block;
    border-top: 19px solid black;
    border-radius: 50%;
}

<div class="wave">
  
</div>

https://codepen.io/anon/pen/EWpjpx

need to make curve line using css

1 Answers1

Linked