CODEWITHSUNDEEP
css
mammam
mammam

Reputation: 129

need to make curve line using css

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

enter image description here

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;
}

Upvotes: 2

Views: 9593

Answers (1)

mehulmpt
mehulmpt

Reputation: 16577

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

Upvotes: 7

Related Questions