css3实现三角形(上下左右)

实现三角形的绘制很简单。

第一步:新建一个div。

第二步:为盒子添加样式。

1.向上

.kailong{
	width:0;
        height:0;
	border-right:50px solid transparent;
	border-left:50px solid transparent;
	border-bottom:50px solid red;
}

css3实现三角形(上下左右)_第1张图片

2.向下

.kailong{
	width:0;
	height:0;
	border-right:50px solid transparent;
	border-left:50px solid transparent;
	border-top:50px solid red;
}

css3实现三角形(上下左右)_第2张图片

3.向左

.kailong{
    width:0;
    height:0;
    border-top:50px solid transparent;
    border-bottom:50px solid transparent;
    border-right:50px solid red;
}

css3实现三角形(上下左右)_第3张图片

4.向右

.kailong{
    width:0;
    height:0;
    border-top:50px solid transparent;
    border-bottom:50px solid transparent;
    border-left:50px solid red;
}

css3实现三角形(上下左右)_第4张图片

至此css3实现三角形的绘制完成了。

你可能感兴趣的:(css3)