css超级实用的一些写法 _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、常见的波浪线（ “~” ），同样需要利用伪类
【css超级实用的一些写法】.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相关文章

css超级实用的一些写法

推荐阅读

山西省晋城市委秘书长王晋峰涉嫌严重违纪违法被查

削骨手术过程是怎样的？

#茜茜的菜谱#剁椒魔芋豆腐、嫩炒猪肝、五花肉焖干豆角这几道家常菜的做法

壹站新项目拟落户奉贤，助力3PL数字化运营转型

忠告|忠告红豆不能与此物一起吃, 混着吃“会致命”, 别傻傻以为好

丹尼斯·尼尔逊|3集播完拿下8.7分，这部新剧创下新的收视纪录

让技术更有温度，华为联合伙伴发布Cloud for Good 行动倡议

华为Mate30华为Mate 40系列首发屏下摄像头！小米：下次安排

女性性生活越湿越短命吗?

[德斯]82284.6欧元起售新款梅赛德斯-AMG E级开启预定

郭德纲 |“德云社”成员集体换女装啥样？郭德纲辣眼睛，岳云鹏油腻，全场最佳还是他

世名科技|世名科技：实际控制人吕仕铭解除质押55万股

#周易专家指迷居士#指迷居士十二生肖2024年正月初一算命运气预测

为啥李冰冰总忍不住飙英语

苏子的历史|他这么做对秦国而言，意义何在？，商鞅变法禁止父子兄弟同宅居住

嫁祸|滴翠亭偷听事件，薛宝钗嫁祸黛玉，如果被黛玉知晓会有什么反应？

智投期市|相信会给你很多启示，上，期货交易大师——斯坦利克罗的交易箴言

「体坛吧咖」猛龙却还是强队！，若球队失去了核心会怎样？骑士秒变鱼腩球队

小米11没抢到？卢伟冰支招：小米之家准备了较多货源

天真童趣的诗词?写孩童调皮的古诗有哪些