Search code examples
htmlcssborder

HTML : How to make a curve like this using HTML & CSS using border or box

<div style="position:absolute; color:#E0922F; border-style:solid; height:140px; width:360px; "></div>

Here the example of the curve picture

This is only i can make. This using border radius

Please teach me how to make a curve middle of straight like using css

Solution

  • You can try like this

    .red-box{
  border:3px solid #E0922F;
  display:block;
  width:360px;
  height:140px;
  position:relative;
}
div.left {
  border: 3px solid #E0922F;
  display: inline-block;
  position:absolute;
  right:-3px;
  top:50px;
  border-right:3px solid #fff;
  background:#fff;
}
.left {
  height: 40px;
  width: 20px;
}


.left {
  border-bottom-left-radius: 90px;
  border-top-left-radius: 90px;
}
    <div class="red-box">
  <div class="left"></div>
</div>