Как сделать искривлённую горизонтальную линию в виде шторки (ᴗᴗᴗᴗᴗ)
Вопрос
Как сделать разделительную линию в виде шторки состоящей из полукругов расположенных горизонтально?
Есть ли элегантное решение не используя JS?
Что было предпринято из попыток:
Вариант 1
Из заголовка вопроса очевидно, что проще всего её сделать текстом используя Latin Small Letter Bottom Half O.
Но, так как подобная шторка подразумевается как графический элемент, а не текст, это не очень хорошее решение. Мы ведь не можем выделить <hr> при просмотре страницы.
<div>ᴗᴗᴗᴗᴗ</div>
Но так её можно будет выделить, что нежелательно для графического элемента, и она насолит в SEO.
Вариант 2
С этим вариантом дела обстоят более чудесно, используется CSS, но если кружков в шторке необходимо сделать 20+, то html разметка выглядит ужасно, т.к. один и тот же <div> повторяется множество раз.
.circle {
width: 20px;
height: 10px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border: 3px solid black;
border-top: 0;
float: left;
}<div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>Прочее
Можно, конечно, использовать изображение, но под такой простой элемент это слишком.
Также смотрел в сторону стилистики <hr>, но в ней за рамки прямой линии не выйти. Можно её искривить, но это уже с использованием JS.
Ответы (1 шт):
Суть подобного графического оформления - узор, который можно легко нарисовать с помощью градиентов:
.curtain {
height: 10px;
border: none;
background: radial-gradient(circle at top center, #0000 0 calc(50% - 5px), #000 calc(50% - 4px) calc(50% - 2px), #0000 calc(50% - 1px)) repeat-x 50% 0 / 20px 20px;
-webkit-mask-image: linear-gradient(to right, #0000, #000 15px calc(100% - 15px), #0000);
mask-image: linear-gradient(to right, #0000, #000 15px calc(100% - 15px), #0000);
}<hr class="curtain">