常见的小图标制作几种方法

最新推荐文章于 2024-07-19 09:57:55 发布

南京闫伟亮的野爹

最新推荐文章于 2024-07-19 09:57:55 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： css

原文链接：https://www.mk2048.com/blog/blog.php?id=bbbc2ibjb&title=%E5%B8%B8%E8%A7%81%E7%9A%84%E5%B0%8F%E5%9B%BE%E6%A0%87%E5%88%B6%E4%BD%9C%E5%87%A0%E7%A7%8D%E6%96%B9%E6%B3%95

版权

前端专栏收录该内容

368 篇文章 3 订阅

订阅专栏

在我们制作网页时，例如导航等，会遇到很多的一些小图标，这里以京东的小三角（如下图）举例，来介绍常用的一些方法。

方法一：也是比较简单的一种方法。用background 来做，一般用一个行内标签如 i ，s 等先转换显示方式 display：block；，然后设置宽高。

如果不是单一的图片，而是精灵图，则应该设置background-position 属性

方法二：我认为是一种比较有技巧性的方法，老版jd就这么玩的。

具体来说就是用两个标签父标签控制图标的位置，子标签里是一个菱形依靠定位来展示大小和方向，父标签第二作用是依靠overflow：hidden；截掉子标签超出的部分。是不是很巧妙。

代码如下：

 1   <style>
 2         .box{
 3             display: block;
 4             width: 200px;
 5             height: 20px;
 6             background: gold;
 7             overflow: hidden;
 8             position: relative;
 9             top: 100px;
10             left: 200px;
11             /*控制小三角的位置*/
12         }
13         .ico{
14             font-style: normal;
15             /*解决菱形倾斜*/
16             text-decoration: none;
17             position: absolute;
18             top: -8px;
19             /*控制三角的大小和方向*/
20         }
21     </style>
22 </head>
23 <body>
24     <i class="box">
25         <s class="ico">◇</s>
26     </i>
27 </body>