用css画常用的图标

工作中经常会用到箭头，加号，三角形等，直接让ui给出设计图icon当然可以，但是牵扯到对齐等操作，对图片的操作显然没有对div（小程序view）来的方便，所以我就在网上找了一些方法，个人仅做整理，并非原创，让我们开始！

箭头

// html
<div class="arrow right"></div>
<div class="arrow left"></div>
<div class="arrow on"></div>
<div class="arrow under"></div>
// css
.arrow {  
    width:20px;
    height:20px;
    border-top:2px solid #000;
    border-right:2px solid #000;
}
.right {transform:rotate(45deg)}
.left {transform:rotate(-135deg)}
.on {transform:rotate(-45deg)}
.under {transform:rotate(135deg)}复制代码

删除

// html
<div class="x"></div>
// css
.x {
    width:50px;
    height:50px;
    position: relative;
    background-color: rgba(169, 169, 169, .2);
    border-radius: 50%;
}
.x::before,.x::after{
    content: "";
    position: absolute;  /*方便进行定位*/
    background-color: #888;
    height: 30px;
    width: 2px;
    top: 50%;
    left: 50%;
    margin-top: -15px;
    margin-left: -1px;
}
.x::before{transform: rotate(45deg);  /*进行旋转*/}
.x::after{transform: rotate(-45deg);}
复制代码

三角形

// html
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="yellow"></div>
// css
div {  
    width: 0;
    height: 0;
    border-width: 40px;
    border-style: solid;
    box-sizing: border-box;
    margin-top: 20px;
}
.red {border-color:  red transparent transparent transparent;} 
.blue {border-color:  transparent blue transparent transparent;}
.green {border-color:  transparent transparent green transparent;}
.yellow {border-color:  transparent transparent transparent yellow;}复制代码

加号➕

// html
<div class="add"></div>
// css
.add {
  border: 1px solid;
  width: 100px;
  height: 100px;
  color: #ccc;
  transition: color .25s;
  position: relative;
}
.add::before{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80px;
  margin-left: -40px;
  margin-top: -5px;
  border-top: 10px solid;
}
.add::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  height: 80px;
  margin-left: -5px;
  margin-top: -40px;
  border-left: 10px solid;
}
.add:hover {
  color: blue;
}
// 附原文网址：https://blog.csdn.net/Helloyongwei/article/details/83242871 如有侵权请告知删除复制代码