运用CSS3绘制三角形的方法
HTML代码:
- <div class="triangle"></div>
<div class="triangle"></div>
这里的div也可以写span p 等元素替代
1、上三角
- .box{
- width: 0;
- height: 0;
- border-left: 50px solid transparent;
- border-right: 50px solid transparent;
- border-bottom: 100px solid #2894d2;
- }
.box{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #2894d2;
}
2、下三角
- .box{
- width: 0;
- height: 0;
- border-left: 50px solid transparent;
- border-right: 50px solid transparent;
- border-top: 100px solid #2894d2;
- }
.box{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #2894d2;
}
3、左三角
- .box{
- width: 0;
- height: 0;
- border-top: 50px solid transparent;
- border-right: 100px solid #2894d2;
- border-bottom: 50px solid transparent;
- }
.box{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid #2894d2;
border-bottom: 50px solid transparent;
}
4、右三角
- .box{
- width: 0;
- height: 0;
- border-top: 50px solid transparent;
- border-left: 100px solid #2894d2;
- border-bottom: 50px solid transparent;
- }
.box{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid #2894d2;
border-bottom: 50px solid transparent;
}
5、左上三角
- .box{
- width: 0;
- height: 0;
- border-top: 100px solid #2894d2;
- border-right: 100px solid transparent;
- }
.box{
width: 0;
height: 0;
border-top: 100px solid #2894d2;
border-right: 100px solid transparent;
}
6、右上三角
- .box{
- width: 0;
- height: 0;
- border-top: 100px solid #2894d2;
- border-left: 100px solid transparent;
- }
.box{
width: 0;
height: 0;
border-top: 100px solid #2894d2;
border-left: 100px solid transparent;
}
7、左下三角
- .box{
- width: 0;
- height: 0;
- border-bottom: 100px solid #2894d2;
- border-right: 100px solid transparent;
- }
.box{
width: 0;
height: 0;
border-bottom: 100px solid #2894d2;
border-right: 100px solid transparent;
}
8、右下三角
- .box{
- width: 0;
- height: 0;
- border-bottom: 100px solid #2894d2;
- border-left: 100px solid transparent;
- }