我正在尝试在 CSS3 中制作一个直角三角形,我拥有的那部分。但是我怎样才能用弧/弓来制作呢?(对不起,我不知道如何最好地将它翻译成英文)。
这是我需要的:
这可能吗?我该怎么做?
如果我有这个我很高兴,但我真的很高兴,如果你们也可以告诉我如何让它从底部滑出,以便顶部从底部滑出。如果你也知道这一点,那就太好了!但这不是我目前的主要问题:-)
可以通过将 aborder-radius
应用于覆盖元素来完成。
.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
颜色填充“空白”区域。
.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