css超级实用的一些写法

一提起图标，大家可能第一个会想到PS、美工等词语，但很多小图标现在根本都不需要再打开PS了。

1、常见的括号（ 前进或后退“>” ）

.arrow{
  width:12rpx;
  height:12rpx; 
  border-top:1px solid #999;
  border-right:1px solid #999;
  transform:rotate(-45deg); 
  position:absolute; 
  right:10px; 
}

2、常见的关闭按钮（ “X” ），这里需要用到一个伪类

.close {
        display: inline-block;
        width: 30px;
        height: 4px;
        background: #333;
        transform: rotate(45deg);
    }

    .close::after {
        content: '';
        display: block;
        width: 30px;
        height: 4px;
        background: #333;
        transform: rotate(-90deg);
    }

3、常见的勾选（ “√” ）

.check {
    position: relative;
    display: inline-block;
    width: 25px;
    height: 25px;
    background: #333;
    border-radius: 25px;
}
.check::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 8px;
    width: 50%;
    height: 25%;
    border: 2px solid #fff;
    border-radius: 1px;
    border-top: none;
    border-right: none;
    background: transparent;
    transform: rotate(-45deg);
}

4、常见的加号（ “+” ），同样需要利用伪类

.add {
  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;
}

5、常见的波浪线（ “~” ），同样需要利用伪类

.info::before {
content: '';
position: absolute;
top: 30px;
width: 100%;
height: 0.25em;

background:
 linear-gradient(
135deg, 
 transparent, 
 transparent 45%, 
 #008000, 
 transparent 55%, 
 transparent 100%
 ),
linear-gradient(
 45deg, 
 transparent, 
 transparent 45%, 
  #008000, 
 transparent 55%, 
 transparent 100%
);
background-size: 0.5em 0.5em;
background-repeat: repeat-x, repeat-x;
}

5、常见的三角形

.triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}

6、常见的扇形

.sector {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #f00;
border-radius: 50%;
}

7、仿微信对话框

.alertDialog {
/* 对话框：一个圆角矩形和一个小三角形 */
width: 150px;
height: 100px;
background: #f00;
border-radius: 10px;
position: relative;
}
.alertDialog:before {
content: "";
width: 0;
height: 0;
position: absolute;
left: -20px;
top: 40px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 20px solid #f00;
}

8、钻石图标

.diamond {
/* 钻石：梯形和三角形组成 */
width: 50px;
height: 0;
position: relative;
border-bottom: 25px solid #f00;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
}
.diamond:before {
content: "";
width: 0;
height: 0;
position: absolute;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 70px solid #f00;
left: -25px;
top: 25px;
}

9、五角星图标

.starFive {
 width: 0;
 height: 0;
 position: relative;
 border-left: 80px solid transparent;
 border-right: 80px solid transparent;
 border-bottom: 60px solid #f00;
 transform: rotate(35deg);
}
.starFive:before {
 content: "";
 position: absolute;
 width: 0;
 height: 0;
 border-left: 80px solid transparent;
 border-right: 80px solid transparent;
 border-bottom: 60px solid #f00;
 transform: rotate(-70deg);
 top: 3px;
 left: -80px;
}
.starFive:after {
 content: "";
 position: absolute;
 width: 0;
 height: 0;
 border-bottom: 60px solid #f00;
 border-right: 20px solid transparent;
 border-left: 20px solid transparent;
 transform: rotate(-35deg);
        top: -40px;
        left: -49px;
}

喜欢的可以加个关注，不定期发布更多css相关文章