Marina666
@Marina666
Создаю сайты

Как сделать вот такой блок?

5f33eb28f16f1546165693.png
как сделать оранжевую полоску?

  • Вопрос задан
  • 128 просмотров
Решения вопроса 4
sniggering_deus
@sniggering_deus Куратор тега CSS
Dance Gavin Dance - Prisoner
Один из вариантов - это добавить псевдоэлемент и залить его градиентом, закрасив только нужную область, оставив остальное пространство прозрачным.
Если делать банально, то можно нарисовать эту дугу в графическом редакторе и вставить бекграундом для псевдоэлемента и спозиционировать как нужно.
Можно заморочиться с clip-path + всё тот же псевдоэлемент с какой-нибудь заливкой или бордером, но это лишнее.
Можно сделать двумя псевдоэлементами эффект дуги, с перекрытием одного псевдоэлемента другим, но возможно не всегда будет адекватно выглядеть.
Или всё же лучшим вариантом будет конечно SVG. Неважно где будет SVG - в разметке, бекграундом псевдоэлемента или ещё как-то, в любом случае это будет универсальное решение.
Ответ написан
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
1. SVG
2. conical gradient, но на данный момент нет поддержке в не вебкитах.
3. 2 псевдоэлемента. На одном дуга в четверть круга, второй перекрывает честь этой дуги.

Мне больше всего нравится последний вариант.
https://jsfiddle.net/zquwg2sy/
Ответ написан
agmegadeth
@agmegadeth
Веб-разработчик в дизайн студии
Я бы наложил svg в виде дуги абсолютно.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

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

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