三角形的CSS椭圆形字符串半径？ [复制]答案

【问题标题】：CSS Oval String Radius of a Triangle? [duplicate]三角形的CSS椭圆形字符串半径？ [复制]
【发布时间】：2021-10-31 17:21:49
【问题描述】：

我有没有办法让这个三角形的最大字符串变成如图所示的椭圆形字符串？谢谢！

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

&lt;div id='triangle-topleft'&gt;&lt;/div&gt;

预期：

【问题讨论】：

标签： css border shapes cornerradius border-radius

【解决方案1】：

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

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

&lt;div id="triangle-topleft"&gt;&lt;/div&gt;

【讨论】：

这是一个不错的简单方法，但它没有提供所需的形状（在“三角形”底部下方的曲线内有一些红色。）

【解决方案2】：

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

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

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

请注意，sn-p 使用 vmin 而不是 px 单位，因此它具有响应性。

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

&lt;div id='triangle-topleft'&gt;&lt;/div&gt;

【讨论】：