03月18, 2017

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

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

img

原理

最外面的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;
}

端口原理

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

本文链接:https://beacelee.com/post/css-draw-plug.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。