html - 如何在CSS中创建虚线点和虚线点线和矩形

如何创建虚线点、虚线点、直线和矩形，如

在css中不使用到图像或其他的外部链接（如果没有更好的方法，可以使用内联数据url）。
https://codepen.io/ibrahimjabbari/pen/ozinB
包含一些示例，如

hr.style17:after {
    content: '§';
    display: inline-block;
    position: relative;
    top: -14px;
    padding: 0 10px;
    background: #f0f0f0;
    color: #8c8b8b;
    font-size: 18px;
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    transform: rotate(60deg);
}

是的。它使用内容和旋转css属性，也许可以使用这些属性。

最佳答案

您可以尝试组合使用repeating-linear-gradient和radial-gradient

.dash-dot {
  height:50px;
  background:
    radial-gradient(circle at center,#000 2px,transparent 3px) 5px 50%/20px 5px repeat-x,
    repeating-linear-gradient(to right,#000,#000 10px,transparent 10px,transparent 20px) center/100% 3px no-repeat
}
.dash-dot-dot {
  height:50px;
  background:
    radial-gradient(circle at center,#000 2px,transparent 3px) 0px  50%/30px 5px repeat-x,
    radial-gradient(circle at center,#000 2px,transparent 3px) 10px 50%/30px 5px repeat-x,
    repeating-linear-gradient(to right,#000,#000 10px,transparent 10px,transparent 30px) center/100% 3px no-repeat;
}

<div class="dash-dot"></div>

<div class="dash-dot-dot"></div>

要创建矩形，需要在每一侧重复相同的操作：

.dash-dot {
  height:210px;
  background:
    /*right*/
    repeating-linear-gradient(to bottom,#000,#000 10px,transparent 10px,transparent 20px) calc(100% - 1px) 0/3px 100% no-repeat,
    radial-gradient(circle at center,#000 2px,transparent 3px) 100% 5px/5px 20px repeat-y,
    /*left*/
    repeating-linear-gradient(to bottom,#000,#000 10px,transparent 10px,transparent 20px) 1px 0/3px 100% no-repeat,
    radial-gradient(circle at center,#000 2px,transparent 3px)  0 5px/5px 20px repeat-y,
    /*top*/
    repeating-linear-gradient(to right,#000,#000 10px,transparent 10px,transparent 20px) 0 1px/100% 3px no-repeat,
    radial-gradient(circle at center,#000 2px,transparent 3px) 5px 0/20px 5px repeat-x,
    /*bottom*/
    repeating-linear-gradient(to right,#000,#000 10px,transparent 10px,transparent 20px) 0 calc(100% - 1px)/100% 3px no-repeat,
    radial-gradient(circle at center,#000 2px,transparent 3px) 5px 100%/20px 5px repeat-x;
}

<div class="dash-dot"></div>