0

Подскажите пожалуйста, как нарисовать такую цепь треугольников от края до края страницы с помощью CSS?

введите сюда описание изображения

1 ответ 1

2

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;
}

2
  • Спасибо, помогло! Подскажите только, как у второго способа менять размер?
    – Nikita R.
    17 июн 2019 в 14:05
  • @NikitaR. , это не 2 способа, это пошаговая инструкция. Т.е. в свойстве background содержимое шага 1. Код из первого шага можно сохранить в файл формата svg и для нужного элемента прописать background: url(file.svg) repeat-x . Размер удобнее всего вам будет регулировать через background-size
    – zhurof
    17 июн 2019 в 14:56

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.