CSS3：带弓/弧的直角三角形

Question

我正在尝试在CSS3中制作一个直角三角形，这是我的一部分。但我怎么能用弧/弓做ith？ （对不起，我不怎么把它翻译成英文）。

这就是我需要的：

这可能吗？我怎么能这样做？

如果我有，我很高兴，但我真的很开心，如果你们也能告诉我如何让它从底部滑出，以便顶部从底部滑出。如果你也知道，那会很棒！但目前这不是我的主要问题： - ）

Answer 1

可以通过将border-radius应用于重叠元素来完成。

Demo

.angled-triangle {
    background-color:orange;
    width:200px;
    height:50px;
    position:relative;
    overflow:hidden;
    padding-left:5px;
    background-clip:content-box;
}

.angled-triangle::before {
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    background-color:white; /*same as element's parent background*/
    border-bottom-right-radius: 99% 90%;
    left:5px; /*push edge out of element*/
}

在最新的Chrome和Firefox中测试过。随意根据需要调整值。

此方法的唯一缺点是您需要将相同的background-color应用于::before作为元素父级的背景，这并不总是可行的（例如body带有背景图像）。请查看下面的更新，了解另一种没有此限制的方法。

更新

另一种可行的方法是使用径向梯度背景。与上述方法不同，此方法不存在任意元素背景的问题，因为此方法使用transparent颜色填充“空白”区域。

Demo

.angled-triangle {
    width:200px;
    height:50px;
    background-image: -moz-radial-gradient(0 0, transparent 70%, orange 71.5%);
    background-image: -webkit-radial-gradient(0 0, transparent 70%, orange 71.5%);
    background-image: radial-gradient(top left, transparent 70%, orange 71.5%);
    background-position: 5px 0px;
    background-repeat:no-repeat;
}

在上方，orange表示您想要三角形的颜色。透明和橙色之间的1.5%只是“缓和”，因此边框看起来不像素化。由于我没有在这些浏览器中测试，因此缺少-ms和-o个供应商前缀。