模块代码之CSS实现三角形

Posted 2020-07-31

html结构：

1 <div class="arrow-up">
2      <!--向上的三角-->
3 </div>

　CSS：

1 /*箭头向上*/
2 .arrow-up {
3     width:0; 
4     height:0; 
5     border-left:30px solid transparent;
6     border-right:30px solid transparent;
7     border-bottom:30px solid #fff;
8 }

1 /*箭头向下*/
2 .arrow-down {
3     width:0; 
4     height:0; 
5     border-left:20px solid transparent;
6     border-right:20px solid transparent;
7     border-top:20px solid #0066cc;
8 }

1 /*箭头向左*/
2 .arrow-left {
3     width:0; 
4     height:0; 
5     border-top:30px solid transparent;
6     border-bottom:30px solid transparent; 
7     border-right:30px solid yellow; 
8 }

1 /*箭头向右*/
2 .arrow-right {
3     width:0; 
4     height:0; 
5     border-top:50px solid transparent;
6     border-bottom: 50px solid transparent;
7     border-left: 50px solid green;
8 }