掌握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相关文章