分享一些CSS画图技巧(4)—插头
March 18, 2017
这个图形其实很少看到,其实在实际生活中,经常会有这样的插头形状,像主机和显示器的相连接的插头。需要两个螺丝钉去固定,以及几个端口去连接。
原理
最外面的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;}
端口原理
端口其实比较简单,只需要定义两行端口居中排开即可。