css - 三角形的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

很难（如果不是不可能的话）“构建”一个三角形，然后像给定的图像一样添加额外的（这使它不再是一个三角形），至少不添加更多元素。

另一种方法是使用 CSS clip-path 属性。

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

请注意，该代码段使用 vmin 而不是 px 单位，因此它是响应式的。

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

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