在CSS中绘制圆底的三角形？

Question

在css中，我可以绘制如下三角形：

.triangle{
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 200px 200px 0;
    border-color: transparent #48a665 transparent transparent;
}

<div class="triangle"></div>

Jsfiddle

现在我想在底部画一个圆角的三角形：

是否可以使用CSS制作它？

Answer 1

假设凹面的背景区域为实线，您可以使用：

Demo Fiddle

CSS

div {
    background:red;
    height:200px;
    width:200px;
    position:relative;
    overflow:hidden;
}
div:after {
    position:absolute;
    content:'';
    display:block;
    height:200%;
    width:200%;
    left:-100%;
    background:white; /* <-- change as appropriate */
    border-radius:100%;
}

这只是将一个偏移圆覆盖在元素上，定位为覆盖其中的一部分，使元素的外观呈凹形。

Answer 2

所以我们创建一个圆圈并将其置于顶部以使其看起来像你想要的样子，你得到这样的东西：

CSS：

.triangle{
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 200px 200px 0;
    border-color: transparent #48a665 transparent transparent;
}
.triangle:after {
    content: "";
    display: block;
    width: 400px;
    height: 400px;
    background: #fff;
    border-radius: 200px;
    left: -190px;
    position: absolute;
}

您需要设置背景颜色（当前为#fff）以匹配其背景。

DEMO HERE