(1)实心三角形
html
<div class='sanjiao'></div>
css
.sanjiao{
border-left: 10px solid transparent;
border-bottom: 10px solid red;//向上的三角
border-right: 10px solid transparent;
border-top: 10px solid transparent;
width: 0px;
height: 0px;
}
(2)空心三角形
这里画了一个正方形,不设置背景色,设置左边和上边相邻两边的border,再画两个三角形,边长为第一个三角形的对角线长度,通过旋转驾到第一个三角形的斜边上,通过两个矩形组合成一个空心的三角形
.sanjiao{
width: 100px;
height: 100px;
border-left: 1px solid red;
border-top: 1px solid red;
position: relative;
}
.sanjiao:after{
content: "";
position: absolute;
left: 29px;
top: 29px;
width: 141.4px;
height: 141.4px;
border-left: 1px solid red;
transform: rotate(45deg);//通过旋转来改变三角形的朝向
}