前端复习（1）CSS三角形

html部分

<div class="triangle"></div>

css部分

.triangle{

　　width: 0;

　　height: 0;

　　border-left:50px solid blue;

　　border-right:50px solid green;

　　border-top:50px solid yellow;

　　border-bottom:50px solid red;

}

得以下结果

然后利用transparent将其他3个边变透明即可，例

.triangle{

　　width: 0;

　　height: 0;

　　border：50px solid transparent;

　　border-bottom:50px solid red;

}

得到三角形(其他方向同理)

.triangle { width: 0; height: 0; border-left: 50px solid blue; border-right: 50px solid green; border-top: 50px solid yellow; border-bottom: 50px solid red }

原文地址：https://www.cnblogs.com/xpcool/p/9626953.html