denis_bardak
@denis_bardak
Web Developer

Как сверстать вот такое?

16ef36b5ab594e53bec5b20c684479c9.jpg
подскажите как сверстать такие стрелки, буду очень признателен.
  • Вопрос задан
  • 882 просмотра
Решения вопроса 4
Symphony
@Symphony Куратор тега CSS
В любой непонятной ситуации используйте svg
Ответ написан
Ronnie_Gardocki
@Ronnie_Gardocki
Я у мамы фронтендщик.
1) Если все это дело вообще статичное и не должно быть адаптивным, то можно вообще хоть картинкой делать, с текстом отдельно (вариант для инвалидов).
2) Можно сварганить с помощью :before/:after/div. Одни элементы будут отвечать за линии, другие за css-треугольники. Вариант для тех, кто боится SVG.
3) SVG. Самый правильный вариант. И анимировать все красиво можно будет (включая круги), и на всех мониторах все будет выглядеть отлично.
Ответ написан
denis_bardak
@denis_bardak Автор вопроса
Web Developer
на svg еще вчера сделал
<svg>
				<line x1="155" y1="203" x2="301" y2="203" stroke-width="2" stroke="#fff"/>
				<line x1="405" y1="203" x2="551" y2="203" stroke-width="2" stroke="#fff"/>
				<line x1="657" y1="203" x2="803" y2="203" stroke-width="2" stroke="#fff"/>
				<line x1="155" y1="487" x2="301" y2="487" stroke-width="2" stroke="#fff"/>
				<line x1="405" y1="487" x2="551" y2="487" stroke-width="2" stroke="#fff"/>
				<line x1="657" y1="487" x2="803" y2="487" stroke-width="2" stroke="#fff"/>
				<polyline points="905,203 958,203 958,339 2,339 2,487 52,487" fill="none" stroke-width="2" stroke="#fff"/>
				<polygon points="219,210 230,203 219,196" fill="#fff" stroke-width="1" stroke="#fff"/>
				<polygon points="469,210 480,203 469,196" fill="#fff" stroke-width="1" stroke="#fff"/>
				<polygon points="721,210 732,203 721,196" fill="#fff" stroke-width="1" stroke="#fff"/>
				<polygon points="469,346 458,339 469,332" fill="#fff" stroke-width="1" stroke="#fff"/>
				<polygon points="219,480 230,487 219,494" fill="#fff" stroke-width="1" stroke="#fff"/>
				<polygon points="469,480 480,487 469,494" fill="#fff" stroke-width="1" stroke="#fff"/>
				<polygon points="721,480 732,487 721,494" fill="#fff" stroke-width="1" stroke="#fff"/>
				<circle cx="104" cy="203" r="52" fill="none" stroke-width="3" stroke="#ffc600"/>
				<circle cx="354" cy="203" r="52" fill="none" stroke-width="3" stroke="#ffc600"/>
				<circle cx="604" cy="203" r="52" fill="none" stroke-width="3" stroke="#ffc600"/>
				<circle cx="854" cy="203" r="52" fill="none" stroke-width="3" stroke="#ffc600"/>
				<circle cx="104" cy="487" r="52" fill="none" stroke-width="3" stroke="#ffc600"/>
				<circle cx="354" cy="487" r="52" fill="none" stroke-width="3" stroke="#ffc600"/>
				<circle cx="604" cy="487" r="52" fill="none" stroke-width="3" stroke="#ffc600"/>
				<circle cx="854" cy="487" r="52" fill="none" stroke-width="3" stroke="#ffc600"/>
			</svg>

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

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

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