如何在CSS中创建虚线点和虚线点线和矩形 [英] How to create dash dot and dash dot dot lines and rectanges in CSS

问题描述

如何创建点划线和点划线以及类似矩形的矩形

How to created dash dot and dash dot dot lines and rectangles like

在CSS中，不使用外部链接到图像或其他链接(如果没有更好的方法，可以使用内联数据url).

in CSS without using external links to images or other (inline data urls can used if there is no better way).

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属性，也许可以使用.

. It uses content and rotate CSS properties, maybe those can used.

推荐答案

您可以尝试将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>

要拥有一个矩形，您需要在每一侧重复相同的内容:

To have a rectangle you need to repeat the same on each side:

.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>

这篇关于如何在CSS中创建虚线点和虚线点线和矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！