css绘制一个带序号的地图Marker

「这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战」。

目前前端行业，字体图标已成为前端图标制作的行业标准。字体图标原理通常来说有以下两种：

将图标集合转化成base64数据，通过背景定位来展示对应的图标。
将svg图片集合数据写进js,通过js来展示对应的图标。上述两种方式都需要从外部加载资源，必然会消耗一定的网络和内存资源。而css图标不需要额外消耗网络资源，并且消耗更少的内存的资源。因此，在一些有规律可循的图标绘制中可以适当使用。在开始绘制之前，我们先来学习几个相关知识。
css box-shadow
伪元素::before和::after

box-shadow

box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色（摘自mdn）

扩散半径决定了阴影比元素框架大几个像素，模糊半径决定了阴影的质感，xy轴偏移量决定了阴影的位置。

.box {
 box-shadow: 0px 0px 3px 4px #df2e24; // 定义了一个四条边都有4px的阴影的元素，阴影的模糊半径为3px
}

伪元素::before和::after

CSS[伪元素]::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。(摘自mdn)

比如通过伪类元素给元素加一条1px的尾巴，可以像下面这样:

.box {
 position: relative;
}
.box::after{
  content: '';
  position: absolute;
  top: 10px;
  left: 0px;
  width: 1px;
  height: 10px;
  background: #df2e24;
}

1636210639(1).jpg

效果图如下,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=0">
  <title>css绘制高德地图marker</title>
  <style>
    .marker-outer {
      display: inline-block;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #4AA5FF;
      text-align: center;
      position: relative;
      box-shadow: 0px 0px 4px 3px #1650af;
    }
    .marker-inner {
      display: inline-block;
      width: 20px;
      height: 20px;
      line-height: 20px;
      border-radius: 50%;
      background: #fff;
      color: #111;
      position: absolute;
      top: 5.5px;
      left: 6px;
      font-size: 14px;
`      `z-index: 3;
    }
    .marker-outer::after {
      display: block;
      content: "";
      width: 14px;
      height: 16px;
      background: #4AA5FF;
      border-radius: 0px;
      transform: rotate(47deg);
      box-shadow: 2px 2px 4px 0px #1650af;
      position: absolute;
      top: 20px;
      left: 9px;
      font-size: 14px;
      z-index: 2;
    }
  </style>
</head>
<body>
  <span class="marker-outer"><span class="marker-inner">3</span></span>
</body>

</html>

简单分析一下绘制过程:

绘制外部大圆

采用border-radius:50%就可以绘制一个圆，这是css开发经验或者说常识，
注意元素的宽高应相等，否则会是一个椭圆。
外部需要四边都有阴影，因此box-shadow属性xy轴偏移量为0，设置模糊半径为4px,这是大致调整参数得出来的。读者可根据想要的效果进行调参。
text-align让内部小圆水平居中

绘制内部小圆

采用绝对定位可以避免影响到尾巴的绘制，绘制同理。这个时候text-align失效，可计算得出left值(32px - 20px)/2 = 6px。

绘制尾巴

绘制尾巴采用了伪类元素after,其实after放在大圆或小圆上都可以绘制出尾巴。但在语义上，这个尾巴应该属于大圆。
尾巴通过一个长方形的旋转的来。这里长方形绝对定位，它的z-index比小圆的绝对定位的z-index小,这样能保证长方形多余的部分被小圆覆盖。
如果想让尾巴不那么有棱角，可以通过设置border-radius来调整。
阴影只需要2个边，因此box-shadow需要设置xy轴偏移量。

总结一下，用css绘制图标，需要按如下几个步骤进行:

将图标拆分成各个小部分，分而治之。
将各部分组合起来，通常通过绝对定位或者相对定位
根据想要的效果，对细节进行调参。

同时，学习一下border,box-shadow,伪类元素，css变换等知识，有助于绘制更精美的图标。感谢阅读，如果有帮到你，请给我点个赞吧。如果有不对的地方，欢迎指正。接下来几篇文章会介绍css的常用开发技巧，欢迎关注！