CSS三角形如何工作? [英] How do CSS triangles work?
本文介绍了CSS三角形如何工作?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在,等宽的边界以45度角彼此对接:
当您没有顶部边框时,它如下所示:
然后你给它的宽度为0 ...
...高度为0 ...
...最后,边框透明:
这会产生一个三角形。
结束 b
There're plenty of different CSS shapes over at CSS Tricks - Shapes of CSS and I'm particularly puzzled with a triangle:
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
<div id="triangle-up"></div>
How and why does it work?
解决方案
CSS Triangles: A Tragedy in Five Acts
As alex said, borders of equal width butt up against each other at 45 degree angles:
When you have no top border, it looks like this:
Then you give it a width of 0...
...and a height of 0...
...and finally, you make the two side borders transparent:
That results in a triangle.
The End
这篇关于CSS三角形如何工作?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文