带有曲线的CSS三角形[重复]

【问题标题】：css triangule with a curve [duplicate]带有曲线的CSS三角形[重复]
【发布时间】：2019-06-15 02:24:05
【问题描述】：

我有这个代码来绘制一个三角形：

.triangulo-equilatero-bottom {
     width: 0;
     height: 0;
     border-right: 100px solid transparent;
     border-top: 100px solid transparent;
     border-left: 100px solid transparent;
     border-bottom: 100px solid #f0ad4e;
}

但我想知道如何画出这样的曲线：

有什么帮助吗？？

【问题讨论】：

你不能用边框来做到这一点。
希望您至少尝试自己编写代码。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。

标签： css

【解决方案1】：

使用radial-gradient：

body {background: pink}

#c {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, transparent 99px, green 100px) 100px 100px / 200px 200px
}

&lt;div id="c"&gt;&lt;/div&gt;

【讨论】：

哦，没想到径向渐变+1
你可以这样简化：jsfiddle.net/6wba4fje
@TemaniAfif，谢谢！但我读到at 语法is not well supported。
你可以试试这个以获得更好的支持jsfiddle.net/vzqfty28
@TemaniAfif，当然，虽然它现在看起来并不“简化”=))。使用% 单位的警告是渐变边缘在较大尺寸上变得模糊，而在较小尺寸上像素化。所以我们必须使用例如calc() 拥有所有优势。