CSS画icon图标系列（一）
目录
前言：
CSS是一种强大且灵活的样式语言，可以通过控制样式的各种属性来实现对网页的精确控制，使网页更具有吸引力和可读性。所以我们可以利用CSS来做我们的一些icon图标，灵活运用CSS中旋转，拉伸，扭曲裁剪，伪元素选择器，实现icon小图标，利用css来画小图标可以减少浏览器的请求，当然使用img标签或icon图标会大大提高我们开发的速度。
本节内容展示：
一、向右箭头
1.原理：
利用border属性，只添加相邻两个边框，使用transform属性进行旋转
2.代码实现
html代码：
<div class="right"></div>css代码：
.right {
/* 设置盒子的宽和高 */
width: 8px;
height: 8px;
/* 添加边框颜色，以及边框样式为实线*/
border: #666 solid;
/* 只添加上边框和右边框 ，下边框和左边框为0*/
border-width: 2px 2px 0 0;
/* 旋转45度 */
transform: rotate(45deg);
}3.结果展示：
总结：同样的我们可以利用旋转，来实现其他方向的箭头，也可以给下边框以及有边框添加边框属性。
二、钟表
1.原理：
利用一个div盒子，以及他自身的伪元素属性，相当于拥有三个盒子，利用定位，圆角来实现一个钟表图标。
2.代码展示：
html:
<div class="clock"></div>css:
/* 钟表 */
.clock {
/* 主体盒子 */
width: 24px;
height: 24px;
/* 添加宽高 */
border: 1px solid rgb(250, 250, 250);
/* 圆角为50%，就是圆形*/
border-radius: 50%;
/* 添加定位 */
position: relative;
}
/* 利用伪元素 */
.clock::after {
/* 默认属性 */
content: "";
/* 转换为块级元素*/
display: block;
/* 定位：父相子绝*/
position: absolute;
/* 设置宽高*/
width: 1px;
height: 10px;
/* 添加背景*/
background: rgb(250, 250, 250);
/* 相对于主体的位置*/
top: 3px;
left: 11px;
}
.clock::before {
content: "";
display: block;
position: absolute;
/* 设置宽高*/
width: 1px;
height: 6px;
/* 设置背景*/
background: rgb(250, 250, 250);
/* 旋转作为时针*/
transform: rotate(45deg);
/* 相对于主体的位置 */
top: 12px;
left: 9px;
}3.最终效果：
三、小手机
1.原理：
利用border属性，添加不同的边框宽度实现。
2.代码展示：
html:
<div class="money">￥</div>css:
/* money图标 */
.money {
/* 利用flex布局让其垂直水平居中显示 */
display: flex;
justify-content: center;
align-items: center;
/* 去除字体默认样式 */
font-style: normal;
/* 设置宽高 */
width: 15px;
height: 24px;
/* 添加边框 实线 */
border: rgb(250, 250, 250) solid;
/* 上右左2px 下3px*/
border-width: 2px 2px 3px 2px;
/* 添加圆角属性 */
border-radius: 3px;
}3.最后效果：
四、结束语
今天我们主要学习了，向右箭头，钟表，小手机图标的实现，下一节继续来使用纯css完成小图标,本节css画icon图标就结束了，下一节再见。
原文地址：https://blog.csdn.net/weixin_65450681/article/details/143503048
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！