CSS border 属性实现三角形

CSS border 属性  用于设置四个边框样式

直接看使用方法：

.sjx:before{
    content: '';
    display: inline-block;
    width: 100px;
    height: 100px;
    background: #FFC;
    border-top: 80px solid #0F0;
    border-right: 80px solid #09C;
    border-bottom: 80px solid #9F9;
    border-left: 80px solid #FC3;
}

可以看到块状元素宽度和高度都是100px，四个边框都是80px，边框的绘制是梯形。

那么假如块状元素的宽度和高度变成0px的时候，四个边框就变成了三角形。

.sjx:before{
    content: '';
    display: inline-block;
    width: 0px;
    height: 0px;
    background: #FFC;
    border-top: 80px solid #0F0;
    border-right: 80px solid #09C;
    border-bottom: 80px solid #9F9;
    border-left: 80px solid #FC3;
}

如果仅仅写一个边框的话，边框又变成一个矩形：边框下面的块状元素就是20px * 20px

.sjx:after{
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;

	border-top: 100px solid #0F0;
	position: relative;
	top: 2px;
	left: 10px;
}

显示一个小三角形：

.sjx:after{
	content: '';
	display: inline-block;
	width: 0px;
	height: 0px;
	border: 8px solid transparent;
	border-top: 8px solid #212121;
	position: relative;
	top: 2px;
	left: 10px;
}

显示其他的图标：

.sjx:after{
	content: '';
	display: inline-block;
	width: 0px;
	height: 0px;
/*	border: 8px solid transparent;*/
	border-top: 80px solid #212121;
	border-right: 180px solid red;
	position: relative;
	top: 2px;
	left: 10px;
}

再比如：

.sjx:after{
	content: '';
	display: inline-block;
	width: 0px;
	height: 0px;
/*	border: 8px solid transparent;*/
	border-top: 80px solid #212121;
	border-right: 180px solid red;
	border-bottom: 100px solid #FC3 ;
	position: relative;
	top: 2px;
	left: 10px;
}

 

可以看到，灵活使用border可以做出很多图案！