update css radius to straight line (jsfiddle attached)

Question

I have a jsfiddle link as follows https://jsfiddle.net/utLhbc3g/

As you can see, i am trying to make a right angle triangle on the left side bottom of the box. but it shows a curve.

.box{
    position:relative;
    background:#fff;
    display:block;
    width:100px; 
    height:100px;  
    border-radius: 100% / 0 0 0 100px;
}

.box::before{
    position:absolute;
    z-index:-1;
    width:100%;
    height:100%;
    background:#f9955e;
    content:"";
}

Can someone please let me know how to straighten that curve line.

Answer 1

Hmm. It's just not going to happen for you using border radius. Border radius applies rounding to corners. If we add a border we can see what's really happening here.

.box {
  position: relative;
  background: #fff;
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 100% / 0 0 0 100px;
  border: 5px solid black;
}

.box::before {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: red;
  content: "";
}

<div class="box"></div>

You have other options, however. CSS triangles provide a nice alternative.

.box {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 120px 0 0 120px;
  border-color: transparent transparent transparent #4f46e5;
}

<div class="box"></div>

See here: https://www.fetoolkit.io/widget/css-triangle

You might also consider the clip-path property, depending on your use case.

clip-path: polygon(0 0, 0% 100%, 100% 100%) 👈 that will give you an equivalent object.

See here for a nice clip-path visualization tool (and it gives you code): https://bennettfeely.com/clippy/

Good luck!