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

Question

我正在尝试在 CSS3 中制作一个直角三角形，这部分我有。但是我怎样才能用弧/弓来制作呢？ （对不起，我不知道如何最好地将它翻译成英文）。

这是我需要的：

这可能吗？我该怎么做？

如果我有这个我很高兴，但我真的很高兴，如果你们也可以告诉我如何让它从底部滑出，以便顶部从底部滑出。如果你也知道这一点，那就太好了！但这不是我目前的主要问题:-)

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 供应商前缀，因为我没有在这些浏览器中测试过。