分享一些CSS画图技巧(4)—插头

这个图形其实很少看到，其实在实际生活中，经常会有这样的插头形状，像主机和显示器的相连接的插头。需要两个螺丝钉去固定，以及几个端口去连接。

原理

最外面的div可以使用圆角的特性，来定义不同位置的圆角显示。

对于两边螺丝钉，我仍然喜欢借助伪类::before和::after来进行螺丝钉的绘制。这两个螺丝钉，大小，形状，内容完全一致。只有位置不统一，因此我们可以先写common部分，然后去分别定义位置信息。

HTML结构

<div class="container">
    <div class="port-wrapper">
      <div class="port-dot-wrapper">
        <span class="port-dot"></span>
        <span class="port-dot"></span>
        <span class="port-dot"></span>
        <span class="port-dot"></span>
        <span class="port-dot"></span>
      </div>
      <div class="port-dot-wrapper">
        <span class="port-dot"></span>
        <span class="port-dot"></span>
        <span class="port-dot"></span>
        <span class="port-dot"></span>
      </div>
    </div>
  </div>

​

最外层div的圆角实现

.container {
  position: relative;
  width: 80px;
}
.port-wrapper {
  border: 1px solid #000;
  width: 78px;
  height: 36px;
  padding: 4px;
  box-sizing: border-box;
  border-radius: 4px 4px 17px 17px;
}

螺丝钉原理

公共部分

通过伪类的content来定义内容，通过绝对定位定义其位置信息。

.port-wrapper::before,
.port-wrapper::after {
  content: "x";
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  text-align: center;
  border: 1px solid #000;
  line-height: 12px;
  font-size: 12px;
  position: absolute;
}

位置信息

.port-wrapper::before {
  left: -16px;
  top: 0;
}
.port-wrapper::after {
  right: -14px;
  top: 0;
}

端口原理

端口其实比较简单，只需要定义两行端口居中排开即可。