CSS Oval String Radius of a Triangle?

Question

i there a way to make the largest string of this triangle an oval string like in the picture? Thanks!

    #triangle-topleft {
      width: 0;
      height: 0;
      border-top: 50px solid red;
      border-right: 100px solid transparent;
    }

<div id='triangle-topleft'></div>

Expected:

score 0 · Accepted Answer · answered Sep 02 '21 at 08:42

0

You can use border-bottom-right-radius: 100% on a rectangle to achieve something like this.

#triangle-topleft {
  width: 100px;
  height: 50px;
  background-color: red;
  border-bottom-right-radius: 100%;
}

<div id="triangle-topleft"></div>

answered Sep 02 '21 at 08:42

Andri

520
1
6
12

This is a nice simple way forward, but it does not give the sort of shape required (which had some of the red inside the curve below the bottom of the 'triangle'.) – A Haworth Sep 02 '21 at 08:49

score 0 · Answer 2 · answered Sep 02 '21 at 08:44

It is difficult, if not impossible, to 'build up' a triangle and then add extra (which stops it being a triangle) as in the given image, at least without adding further elements.

A different approach is to use the CSS clip-path property.

If we start with a rectangle and then set a clip path of an ellipse we can get this sort of shape. Obviously you have to play around with the parameters of the ellipse to get exactly what you want.

Note that the snippet uses vmin rather than px units just so it is responsive.

 #triangle-topleft {
      width: 30vmin;
      height: 20vmin;
      background-color: red;
      clip-path: ellipse(10vmin 10vmin at 20% 20%);
    }

<div id='triangle-topleft'></div>

CSS Oval String Radius of a Triangle?

2 Answers2