如何绘制弯曲边界的右下角三角形?
由于上CSS-Tricks指出,一个CSS三角形可以写成:如何绘制弯曲边界的右下角三角形?
#triangle {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
<div id="triangle"></div>
曲线通过通过CSS边框然而,这似乎并没有工作:
#triangle {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
border-bottom-right-radius: 10px;
}
<div id="triangle"></div>
It在FF上创建毛刺,并在Chrome上将整个三角形显示为红色。 Safari似乎是唯一一个展现我所期望的。
问题1.这是一个浏览器错误还是我做错了什么?
问题2.任何其他方式可以轻松实现具有右下边框半径的右下角三角形?我在想SVG,但是那时曲率的特征会很难从代码中修改。
谢谢。
我最喜欢SVG解决方案的想法,但是如果您有固定的背景色将其放置在上面,您可以使用纯CSS来做这样的事情。我使用的是伪元素,但这个想法是把在另一个之上,以“面具”它一个三角形,这或许可以通过其他方式来完成过:
https://codepen.io/alexmacarthur/pen/dWOoYL
Original Triangle:
<div id="triangle"></div>
<br>
Possible Solution:
<div id="triangle2"></div>
<style>
#triangle {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
border-bottom-right-radius: 10px;
}
#triangle2 {
position: relative;
&:before,
&:after {
content: '';
display: block;
position: absolute;
z-index: 1;
width: 0;
height: 0;
border-top: 100px solid white;
border-right: 100px solid transparent;
border-bottom-right-radius: 10px;
}
&:after {
z-index: 0;
border-right: none;
border-top: none;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
border-bottom-right-radius: 10px;
}
}
</style>
案例1 :同在浏览器,Firefox,IE
border-bottom: 100px solid red;
border-left: 100px solid yellow;
border-right: 100px solid green;
border-top : 100px solid transparent;
border-bottom-right-radius: 10px;
案例-2:相同于浏览器,Firefox,IE
如果border-top
未提供其视为border-top:none
border-bottom: 100px solid red;
border-left: 100px solid yellow;
border-right: 100px solid green;
border-bottom-right-radius: 10px;
在浏览器,Firefox,IE
情况3:同在Chrome和IE在Firefox中的区别
Here border-top:none;border-right:none;
border-left: 100px solid yellow;
border-bottom: 100px solid red;
border-bottom-right-radius: 10px;
案例-4:在IE中不同的是,在浏览器不同的是,不同的Firefox
这里border-top:none;border-right:none;
border-left: 100px solid transparent;
border-bottom: 100px solid red;
border-bottom-right-radius: 10px;
案例5:同在Chrome,火狐,IE
这里border-top:none;border-right:none;border-bottom-right-radius:none
border-left: 100px solid transparent;
border-bottom: 100px solid red;
#triangle {
width: 0;
height: 0;
border: 100px solid red;
border-left: 100px solid transparent;
border-top: 100px solid transparent;
border-bottom-right-radius: 10px;
}
<div id="triangle"></div>
是的!而已!你会添加一个解释为什么你的代码段工作,而我不这样做,我可以接受这个答案? – doplumi
@doplumi更新后,无论它显示不一致的行为,它可以被视为错误或只是在不同浏览器中的css模块的不同实现。 –
入住此示例 - http://*.com/questions/14446677/how-to-make- 3角圆角三角形在css –