4

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

img

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

contains some samples like

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);
}

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

Andrus
  • 26,339
  • 60
  • 204
  • 378

1 Answers1

5

You can try a combination of repeating-linear-gradient and 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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • This method works for lines only. How to create dash-dot and dash-dot-dot rectangles ? – Andrus Jan 26 '19 at 13:48
  • @Andrus check the update, you simply need to repeat on each side – Temani Afif Jan 26 '19 at 14:01
  • @TemaniAfif please can you explain what is the mean of `5px 50%/20px 5px` – doğukan Jan 26 '19 at 15:10
  • @DogukanCavus it's `background-position/background-size` so placed at `5px 50%` (top left) with a size of `20px 5px` (width height) .. if you want more detail about how percentage value in background position works you can read this: https://stackoverflow.com/a/51734530/8620333 – Temani Afif Jan 26 '19 at 15:13