Curve the element slightly until it becomes a straight line-CodePudding

Is it possible to create an a curved element like this with border radius ruler if so what is it?

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

<div ></div>

i tried doing it with this code but i cant seem to make it work.

CodePudding user response：

No, you can't do it using border radius. I would recommend the following method instead:

.box {
    height: 200px;
    overflow:hidden;
    background-color: #FF7C07;
    position:relative;
    z-index:10;
}
.box:before {
    content: "";
    position: absolute;
    left: -25%;
    right: -125%;
    top: -200%;
    bottom: 30%;
    background-color: #FFF;
    border-radius: 100%;
    z-index: -1;
}

<div >123</div>

CodePudding user response：

This was the closest I could get to your curved element. Sadly, there is no direct way of doing this using only border radius.

.box {
  width: 500px;
  height: 100px;
  border: solid 0 #000;
  border-color: #000 transparent transparent transparent;
  background-color: #FF7C07;
}

.top-right {
  margin-top: -125px;
  margin-left: -35px;
  width: 535px;
  height: 80px;
  border-bottom-left-radius: 100%;
  background-color: #FFFFFF;
}

<div ></div>
<div ></div>

CodePudding user response：

You can use a radial-gradient as background for this:

.box {
  width: 500px;
  height: 200px;
  background: radial-gradient(110% 50% at top right,#0000 99%,#FF7C07);
}

<div ></div>