LenovoId
@LenovoId
what the fuck ?

Как сделать дырки (технологические отверстия) вот таким образом?

Тренеруюсь с вёрсткой но вот такой шаблон попался с дырками ...
Вопрос теоретический ...как сделать эти дырки ?

5c5e7d8e05cfd288686112.png

Не хотелось бы PNG

Отдельное спасибо 0xD34F так как вариант решение суперуникальный и его способности в js суперские

Я же всё же сделал на SVG но не через редактор а руками : https://codepen.io/topicstarter/pen/gqvdYr
  • Вопрос задан
  • 325 просмотров
Решения вопроса 3
0xD34F
@0xD34F
например

UPD. Используем элемент path, есть внешний контур, покрывающий весь svg, и множество внутренних - для вырезания дырок. Чтобы дырки вырезались, их надо рисовать в направлении, обратном тому, в котором рисовалась основная фигура. То есть, контур рисуется против часовой стрелки:

rectPath = `M0 0 v${vert} h${horz} v${-vert} h${-horz}`

От (0, 0) сначала движемся вниз (v - вертикальное смещение), затем вправо (h - горизонтальное), далее вверх, и наконец обратно горизонтально (вернулись в (0, 0)).

А дырки по часовой стрелке:

cellPath = ([ x, y ]) => `M${offset(x)} ${offset(y)} h${side} v${side} h${-side} v${-side}`

Сначала смещаемся в горизонтальном направлении вправо, затем вниз, потом обратно влево, и обратно вверх.
Ответ написан
На самом деле очень просто:
Создаешь родительский элемент c opacity, border-radius, overflow: hidden
В в нём создаешь дочерние элементы с заливкой #000, и позиционируешь их как нужно
5c5e8bd180f7c441944241.jpeg
Ответ написан
@forspamonly2
имхо, самый простой вариант - это градиентами.

Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы