[分享]css做一个手型图标

CSS作为前端开发中的重要一环，其实不仅可以用来设置网页内容的样式，还可以制作一些有趣的图标，比如这次我们来制作一个手型图标。.hand { width: 20px; height: 25px; bo...

CSS作为前端开发中的重要一环，其实不仅可以用来设置网页内容的样式，还可以制作一些有趣的图标，比如这次我们来制作一个手型图标。

.hand {
  width: 20px;
  height: 25px;
  border-radius: 15px 15px 0 0;
  background-color: #f4b183;
  position: relative;
}

.hand::after {
  content: ';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border-width: 0 10px 10px 0;
  border-style: solid;
  border-color: transparent #c65911 transparent transparent;
} 

如上所示，我们首先定义了一个手型的基本样式，主要包含一个20*25的矩形区域以及四个圆角设置。然后使用伪类 `::after` 来制作手指部分，实现方式是使用border来绘制一个三角形，并设置透明颜色实现遮盖其他部分。

当然，这只是一个简单的示例，实际情况下，我们还可以对其进行多种样式的设置，如调整手型颜色、加入边框等等，具体则根据实际需求决定。