css代码创建三角形
2017-11-21 本文已影响35人
koreadragon
其实就是利用选择性显示div的边框，达到创建一个三角形的目的。元素本身是没有宽高的。
以下代码显示即将参制作三角形的四个边框：
//css
.trangle_up{
width:0px;
height:0px;
overflow: hidden;
border-left: 4px solid blue;
border-right: 4px solid blueviolet;
border-bottom: 4px solid #ca0309;
border-top: 4px solid green;
padding-left: 20px;
padding-top: 20px;
}
//html
<body>
<div class="trangle_up">
</div>
</body>
四个边框关系及其交叉处
我们现在去掉padding，看看效果:
去除所有宽高，包括padding,margin
然后选择性屏蔽任意边框就可以达到目的了。
.trangle_up{
width:0px;
height:0px;
overflow: hidden;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid red;
border-top: 20px solid transparent;
}
除了下边框，其他全部透明
.trangle_up{
width:0px;
height:0px;
overflow: hidden;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid green;
border-top: 20px solid green;
}
如果你高兴，还可以制作一个沙漏出来，上面这段代码效果，显示上下边框，左右不显示。
左右透明，只显示上下边框
