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

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.

#html #html5 #css #css3