在前端工作中遇到三角形或者需要箭头的样式，我们不仅可以利用图片来实现效果，还可以利用css来实现。

<div class="triangle"></div>

1、利用border来实现

(1)向下三角形

.triangle{
	width: 0; 
 	height: 0;
 	border-width: 100px;
 	border-style: solid;
 	border-color:#ff0000 transparent transparent transparent;
 }

(2)向左三角形

.triangle{
	width: 0; 
 	height: 0;
 	border-width: 50px;
 	border-style: solid;
 	border-color: transparent #ff0000 transparent transparent;
 }

(3)利用 CSS3 transfrom 旋转 45 度实现三角形

<div class="triangle">
  <span>css3 transfrom 三角形</span>
  <div class="transform"></div>
</div>

 

.triangle {
    position:relative;
    width:200px;
    height:60px;
    line-height:60px;
    background:#E9FBE4;
    box-shadow:1px 2px 3px #E9FBE4;
    border:1px solid #C9E9C0;
    border-radius:4px;
    text-align:center;
    color:#0C7823;
}
.transform {
    position:absolute;
    bottom:-8px;
    bottom:-6px;
    left:30px;
    overflow:hidden;
    width:13px;
    height:13px;
    background:#E9FBE4;
    border-bottom:1px solid #C9E9C0;
    border-right:1px solid #C9E9C0;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
}

 

总结： transparent是透明的意思，也就是与背景色同化。 

2、利用伪类实现箭头

<div class="arrow" ></div>

(1)向左箭头

.arrow{
 position: relative;
}
.arrow:before,.arrow:after{
 position: absolute;
 content: '';
 border-top: 20px transparent dashed;
 border-left: 20px transparent dashed;
 border-bottom: 20px transparent dashed;
 border-right: 20px #fff solid;
}
.arrow:before{
 border-right: 20px #ff0000 solid;
}
.arrow:after{
 left: 4px; /*通过覆盖调整箭头粗细*/
 border-right: 20px #fff solid;
}

(2)向上箭头

.arrow{
 position: relative;
}
.arrow:before,.arrow:after{
 position: absolute;
 content: '';
 border-top: 20px transparent dashed;
 border-left: 20px transparent dashed;
 border-right: 20px transparent dashed;
 border-bottom: 20px #fff solid;
}
.arrow:before{
 border-bottom: 20px #ff0000 solid;
}
.arrow:after{
 top: 4px; /*通过覆盖调整箭头粗细*/
 border-bottom: 20px #fff solid;
}

(3)利用 CSS3 transfrom 旋转 来实现多方向箭头

比如：向下箭头

.arrow{
 position: relative;
}
.arrow:before,.arrow:after{
 position: absolute;
 content: '';
 border-top: 20px transparent dashed;
 border-left: 20px transparent dashed;
 border-right: 20px transparent dashed;
 border-bottom: 20px #fff solid;
}
.arrow:before{
 border-bottom: 20px #ff0000 solid;
 -webkit-transform:rotate(180deg);
 -moz-transform:rotate(180deg);
 -o-transform:rotate(180deg);
 transform:rotate(180deg);
}
.arrow:after{
 border-bottom: 20px #fff solid;
 -webkit-transform:rotate(180deg);
 -moz-transform:rotate(180deg);
 -o-transform:rotate(180deg);
 transform:rotate(180deg);
 bottom: -36px; /*通过覆盖调整箭头粗细*/
}

 

 

 

css 箭头简单的样式实现效果

1.左箭头

  

 html:  <div class="a"></div>

 style: 

 .a {
 
          width: .3rem;
          height: .3rem;
          border-top: 2px solid #e6e6e6;
          border-right: 2px solid #e6e6e6;
          transform:  rotate(225deg)
 
     }
 

2.右箭头

 html:  <div class="a"></div>

 style: 

    

      .a {
 
          width: .3rem;
          height: .3rem;
          border-top: 2px solid #e6e6e6;
          border-right: 2px solid #e6e6e6;
          transform:  rotate(45deg)
 
     }
3. 实心箭头

 html:  <div class="a"></div>

 style: 

   

.a {
 
   width: 0;
   height: 0;
   border-width: 20px;
   border-style: solid;
   border-color: red #000 blue gray;
 
}
所以想要什么箭头直接更改border-color即可，添加  transparent 。

比如左箭头   border-color: transparent  transparent   transparent  #000 ;

4.三角形

div {
   border: 6px solid #fff;
    border-top: none;  /*去掉会变成原本的宽高12*/
    border-right-color: transparent;
    border-bottom-color: transparent;

}

————————————————
版权声明：本文为CSDN博主「omg_lwf」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/omg_lwf/article/details/79407835

————————————————
版权声明：本文为CSDN博主「Lisa」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43565197/article/details/99866780