通过CSS形成三角形

时间:2019-08-29 14:11:29 类型:HTML/CSS
字号:    

遇到三角形状, 一般我们都是切一图片, 其实用css设置边框也是可以形成的 如图: 

    


<span style="
		    width: 0;
		    height: 0;
		    overflow: hidden;
		    line-height: 0;
		    font-size: 0;
		    vertical-align: middle;
		    border-bottom: 6px solid #3983e5;
		    border-top: 6px solid transparent;
		    border-left: 6px solid transparent;
		    border-right: 6px solid transparent;">
    </span>

关于边框的理解:如果一个元素的宽度设为0,border-width却为大于0的数,结果是会出现一个正方形(每个边会成为一个等边直角三角形),如果设置border-color为上右下左不同的四种颜色,结果就会出现一个由四个等边三角形构成的正方形!



<span style="
		    width: 0;
		    height: 0;
		    overflow: hidden;
		    line-height: 0;
		    font-size: 0;
		    vertical-align: middle;
		    border-bottom: 6px solid blue;
		    border-top: 6px solid black;
		    border-left: 6px solid red;
		    border-right: 6px solid yellow;">
    </span>