用css做出来一个三角形
![](https://images2015.cnblogs.com/blog/1121914/201704/1121914-20170409110817316-2037403537.png)
<!--不设置宽高 转换行内块 边线设置成宽度-->
<div class="triangle"> 三角形复习<span></span></div>
/* 相对定位*/
.triangle {
position: relative;
}
/* 绝对定位*/
.triangle span {
position: absolute;
top: 5px;
display: inline-block; /* 行内块*/
0;
height: 0;
border- 5px;
/*边线颜色设置 transparent 透明 顺序 上 右 下 左 更改顺序可以得到不同角度的正三角行 */
border-color: transparent red transparent transparent ;
/*边线样式设置为实线*/
border-style: solid solid solid solid;
}
#triangle-topleft {
0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
![](https://images2015.cnblogs.com/blog/1121914/201704/1121914-20170409111201691-1912531358.jpg)
#triangle-topright {
0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
![](https://images2015.cnblogs.com/blog/1121914/201704/1121914-20170409111305160-1342011362.jpg)
#triangle-bottomleft {
0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
![](https://images2015.cnblogs.com/blog/1121914/201704/1121914-20170409111317925-1389853301.jpg)
#triangle-bottomright {
0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}