CSS3 绘制三角形
使用CSS实现绘制三角形。
代码:
<div class="triangle"></div>
.triangle {
float: left;
width: 0;
height: 0;
line-height: 0;
font-size: 0;
/* 主要CSS样式 */
border: 50px solid transparent; /* 改变px变化大小 */
border-left: 50px solid black; /* 改变border-方向,变化三角形朝向 */
}
效果图:
当为四个边都设置后:
.triangle {
float: left;
width: 0;
height: 0;
/* 主要CSS样式 */
border-top: 50px solid royalblue;
border-bottom: 50px solid skyblue;
border-right: 50px solid steelblue;
border-left: 50px solid wheat;
}
效果图: