带有曲线的css三角

Question

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

.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;
}

但是我想知道如何绘制这样的曲线：

有帮助吗？

Answer 1

使用radial-gradient：

body {background: pink}

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

<div id="c"></div>