如何用 CSS 弯曲三角形的斜边答案

【问题标题】：How to Curve the hypotenuse of a triangle with CSS如何用 CSS 弯曲三角形的斜边
【发布时间】：2021-02-22 17:47:28
【问题描述】：

我想用 CSS 将这个三角形div/background 的斜边弯曲，所以结果是这样的：

【问题讨论】：

不可能。您需要使用 SVG 或画布来绘制该路径。

标签： html css

【解决方案1】：

背景可以做到：

.box {
  width: 200px;
  height: 150px;
  background: radial-gradient(180% 180% at right -65% top -65%, transparent 99%, red )
}

&lt;div class="box"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

另一种方法，将您所在的背景与伪匹配：覆盖您需要的部分后：

尽管我更喜欢上面的@Temani Afif 回答。

#curved-triangle::after {
    content: "";
    position: absolute;
    top: -100px;
    left: 0px;
    background: #fff;
    width: 200px;
    height: 200px;
    border-radius: 100%;
}
#curved-triangle {
    width: 0;
    height: 0;
    border-left: 0px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 100px solid red;
    position: relative;
}

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

【讨论】：