CSS 三角形的椭圆弦半径？

Question

有没有办法把这个三角形的最大的绳子做成图中的椭圆形绳子？谢谢！

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

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

预计：

Answer 1

您可以在矩形上使用 border-bottom-right-radius: 100% 来实现类似的效果。

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

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

Answer 2

即使不是不可能，也很难'build up'一个三角形，然后像给定的图像一样添加额外的（这不再是三角形），至少在不添加更多元素的情况下。

另一种方法是使用 CSS 剪辑路径属性。

如果我们从一个矩形开始，然后设置一个椭圆的裁剪路径，我们就可以得到这种形状。显然，您必须使用椭圆的参数来获得您想要的结果。

请注意，该代码段使用 vmin 而不是 px 单位只是为了响应。

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

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

CSS 三角形的椭圆弦半径？

CSS Oval String Radius of a Triangle?

css

border

shapes

cornerradius

border-radius