掌握CSS的高效技巧

很多小图标现在根本都不需要再打开PS，使用PS等修图工具处理了。以下整理了些使用CSS设计的图标。

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;}