Подскажите пожалуйста, как нарисовать такую цепь треугольников от края до края страницы с помощью CSS?
1 ответ
1) Нарисовать в svg
треугольник с отступом справа (или в вашем случае экспортировать из figma, но затем для отступа сделать шире)
<svg width="124" height="62" viewBox="0 0 124 62" xmlns="http://www.w3.org/2000/svg">
<path d="M0,0 104,0 52,62 z" fill="#5cd4c6" />
</svg>
2) Поставить его фоновым изображением с повтором по горизонтали (не обязательно data-url, можно и обычной ссылкой)
body{
background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTI0IiBoZWlnaHQ9IjYyIiB2aWV3Qm94PSIwIDAgMTI0IDYyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KCTxwYXRoIGQ9Ik0wLDAgMTA0LDAgNTIsNjIgeiIgZmlsbD0iIzVjZDRjNiIgLz4NCjwvc3ZnPg0K) repeat-x left top;
}
-
Спасибо, помогло! Подскажите только, как у второго способа менять размер? 17 июн 2019 в 14:05
-
@NikitaR. , это не 2 способа, это пошаговая инструкция. Т.е. в свойстве background содержимое шага 1. Код из первого шага можно сохранить в файл формата
svg
и для нужного элемента прописатьbackground: url(file.svg) repeat-x
. Размер удобнее всего вам будет регулировать черезbackground-size
– zhurof17 июн 2019 в 14:56