CSS border实现各个方向等腰直角三角

Posted 2020-07-12 -小白白白

CSS代码：

 1 .border_cort, .border_corr, .border_corb, .border_corl {
 2     display: inline-block;
 3     width: 0;
 4     height: 0;
 5     border-width: 6px;
 6     overflow: hidden;
 7 }
 8 .border_cort {
 9     border-color: #333 transparent transparent;
10     border-style: solid dotted dotted;
11 }
12 .border_corr {
13     border-color: transparent #333 transparent transparent;
14     border-style: dotted solid dotted dotted;
15 }
16 .border_corb {
17     border-color: transparent transparent #333;
18     border-style: dotted dotted solid;
19 }
20 .border_corl {
21     border-color: transparent transparent transparent #333;
22     border-style: dotted dotted dotted solid;
23 }

html代码：

1 <span class="border_cort"></span>   //下箭头
2 <span class="border_corb"></span>  //上箭头
3 <span class="border_corl"></span>  //右箭头
4 <span class="border_corr"></span>  //左箭头