试图用CSS绘制虚线

时间:2016-08-23 12:21:19

标签: html css css3 draw css-shapes

enter image description here

我试图用CSS绘制它,我没有解决方案。 谁能帮我这个? Ps:我做了很少的搜索,谢谢。

2 个答案:

答案 0 :(得分:6)

您可以在此处使用 CSS pseudo元素绘制虚线:

.border {
  border-top: 1px dotted #000000;
  position: relative;
  margin: 100px 0 0 0;
  height: 4px;
}
.border::after {
  content: "";
  height: 1px;
  border-top: 1px dotted #000000;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.border::before {
  content: "";
  height: 1px;
  border-top: 1px dotted #000000;
  width: 100%;
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
}
<div class="border">

</div>

答案 1 :(得分:2)

重复渐变可以做到

&#13;
&#13;
div {
  height: 1.5em;
  background-image: radial-gradient(grey 15%, transparent 16%), radial-gradient(grey 15%, transparent 16%);
  background-size: .5em .5em;
  background-position: 0 0, .5em .5em
}
&#13;
<div></div>
&#13;
&#13;
&#13;