在CSS的编写过程中,搜索图标是需要用到的一种元素。本文将为大家介绍CSS中搜索图标怎么做。 .search-icon { display: inline-block; position: relat
在CSS的编写过程中,搜索图标是需要用到的一种元素。本文将为大家介绍CSS中搜索图标怎么做。
.search-icon { display: inline-block; position: relative; width: 20px; height: 20px; } .search-icon:before { content: ""; display: block; position: absolute; top: 6px; left: 0; width: 0; height: 0; border: 5px solid transparent; border-right-color: #000; transform: rotate(-45deg); } .search-icon:after { content: ""; display: block; position: absolute; top: 9px; left: 3px; width: 10px; height: 2px; background-color: #000; transform: rotate(45deg); }
以上代码是实现搜索图标的CSS样式代码。首先,在search-icon类中定义图标元素的基本属性。通过:before和:after实现搜索图标的2个组成部分,即尖头和平行线。其中:before用于绘制尖头,通过设置透明边框和颜色边框的方式实现一个45度角的三角形,然后通过transform属性旋转-45度,使其变成一个尖头。:after用于绘制平行线部分,通过设置宽度、高度、颜色等属性实现平行线样式,然后通过transform属性旋转45度,使其和尖头对称。
使用时只需要在HTML中加入以下代码即可:
<span class="search-icon"></span>
将搜索图标的样式类加入到HTML中的标签上即可实现搜索图标在页面中的呈现。
粉丝
0
关注
0
收藏
0