Search code examples
htmlcsscss-shapes

How to Curve the hypotenuse of a triangle with CSS


I would like to curve the hypotenuse side of this triangle div/background with CSS, so the result is something like this:

enter image description here


Solution

  • background can do it:

    .box {
      width: 200px;
      height: 150px;
      background: radial-gradient(180% 180% at right -65% top -65%, transparent 99%, red )
    }
    <div class="box"></div>