Попытка нарисовать пунктирную линию с помощью CSS

Question

Я пытаюсь сделать это с помощью CSS, у меня нет никакого решения. Может ли кто-нибудь помочь мне с этим? Ps: Я немного искал материал, спасибо.

Answer 1

Вы можете использовать CSSpseudo элементы здесь, чтобы нарисовать пунктирные линии, как:

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

Answer 2

Повторяющийся градиент может сделать

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 
 
}

<div></div>