Как нарисовать рамку треугольникам если он построен в conic-gradient?
Есть такой круг, нужны вот такие рамки внутри треугольника. Если задавать рамку то она квадратная
Круг нарисован вот так
background: conic-gradient( from -90deg, rgba(236, 55, 0, 1) 0 12.5%,rgba(245, 245, 245, 1) 0 25%,rgba(236, 55, 0, 1) 0 37.5%,rgba(245, 245, 245, 1) 0 50%,rgba(236, 55, 0, 1) 0 62.5%,rgba(245, 245, 245, 1) 0 75%,rgba(236, 55, 0, 1) 0 87.5%,rgba(245, 245, 245, 1) 0 100% ); |
background: conic-gradient( from -90deg, rgba(236, 55, 0, 1) 0 12.5%,rgba(245, 245, 245, 1) 0 25%,rgba(236, 55, 0, 1) 0 37.5%,rgba(245, 245, 245, 1) 0 50%,rgba(236, 55, 0, 1) 0 62.5%,rgba(245, 245, 245, 1) 0 75%,rgba(236, 55, 0, 1) 0 87.5%,rgba(245, 245, 245, 1) 0 100% );
Дополнительно:
Почему не inline svg? Зачем нужно именно страдать используя css?
а как мне сделать это инлайнами ?
https://developer.mozilla.org/ru/docs/Learn/HTML/M...
Можно посмотреть в инспекторе чуть похожий проект: https://yatr.fragster.ru/ (там все на js генерится, что достаточно удобно)
исходники, хоть и крутится стрелка а не поле, тут: https://github.com/FragsterAt/yatr могут быть полезны
я же правильно понимаю, что потом захочется все это еще и анимировать красивенько? )
https://codepen.io/kapysta-xxl/pen/VwgBowV
Ответы:
width: 400px; height: 400px; border-radius: 50%; background: conic-gradient( from -90deg, rgba(236, 55, 0, 1) 0 12.5%,rgba(245, 245, 245, 1) 0 25%,rgba(236, 55, 0, 1) 0 37.5%,rgba(245, 245, 245, 1) 0 50%,rgba(236, 55, 0, 1) 0 62.5%,rgba(245, 245, 245, 1) 0 75%,rgba(236, 55, 0, 1) 0 87.5%,rgba(245, 245, 245, 1) 0 100% ); |
width: 400px; height: 400px; border-radius: 50%; background: conic-gradient( from -90deg, rgba(236, 55, 0, 1) 0 12.5%,rgba(245, 245, 245, 1) 0 25%,rgba(236, 55, 0, 1) 0 37.5%,rgba(245, 245, 245, 1) 0 50%,rgba(236, 55, 0, 1) 0 62.5%,rgba(245, 245, 245, 1) 0 75%,rgba(236, 55, 0, 1) 0 87.5%,rgba(245, 245, 245, 1) 0 100% );
- ну это то то что у меня есть
- Danya Wyse, тогда в чём проблема ? у меня не квадрат xd
- Мне нужно что то типа солнышка нарисовать линиями
- Danya Wyse, в один слой градиента не выйдет, несколько слоёв ( несколько блоков друг на друге )
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы нарисовать рамку треугольника, который построен с использованием conic-gradient, можно воспользоваться следующим подходом:
1. Создайте контейнер, в котором будет находиться треугольник. Например,
.
2. Примените стили к этому контейнеру, чтобы он имел форму треугольника с помощью conic-gradient. Например:
.triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 86.6px solid #f00; /* цвет фона треугольника */ background: conic-gradient(#fff 0deg 120deg, #f00 120deg 240deg, #fff 240deg 360deg); /* conic-gradient для заливки треугольника */ }
3. Для создания рамки вокруг треугольника, можно добавить дополнительный элемент внутри контейнера и применить к нему стили для создания рамки. Например:
.triangle { position: relative; } .triangle::after { content: ''; position: absolute; top: 2px; /* отступ от верхней грани треугольника */ left: 2px; /* отступ от левой грани треугольника */ right: 2px; /* отступ от правой грани треугольника */ bottom: 2px; /* отступ от нижней грани треугольника */ border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 86.6px solid #000; /* цвет рамки треугольника */ }
Таким образом, вы создадите треугольник с рамкой, который построен с использованием conic-gradient. Важно помнить, что поддержка conic-gradient может различаться в различных браузерах, поэтому рекомендуется провести тестирование на различных устройствах и браузерах для обеспечения корректного отображения.