Section.Border-Clock { background-color: #EBEB83; width: 300px; height:

Question

Section.Border-Clock { background-color: #EBEB83; width: 300px; height:

300px;
border: 10px solid #F4F48E;
border-radius: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 15px 15px 35px -10px #488893;
}

это круг одноцветный
мне нужно сегментировано поменять на нём цвет
это круг от часов, надо например с часа до двух сделать зелёным, потом красным и тд.
как это сделать? накладывать ещё один круг поверх или как-то иначе можно?

#css #frontend #html #programming #russian

0

07.02.2023

5 ответов

3 просмотра

Кирилл

.clock-segment { width: 300px; height: 300px; background-color: #green; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 50% 50%); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

0

07.02.2023

Кирилл

https://codepen.io/KirKol94/pen/NWBmyRQ?editors=1100

0

07.02.2023

@DS 🎭 Автор вопроса

Кирилл
https://codepen.io/KirKol94/pen/NWBmyRQ?editors=11...

то что нужно. только как бы его повернуть этот полигон? допустим ещё добавить 1 сегмент возле другого? там clip-path: polygon(50% 50%, 100% 16%, 100% 0); игрался с параметрами и не понял как бы его "вращать", то есть вот сделать как часовые сегменты

0

07.02.2023

Кирилл

@DS 🎭
то что нужно. только как бы его повернуть этот пол...

ну я бы нашел циферблат, нашел бы сайт, который генерируй этот клип паф положил бы циферблат фоном и вырезал бы как надо

0

07.02.2023

Ruslan · Accepted Answer

Ruslan

накладывать сектор

0

07.02.2023

169 похожих чатов

Section.Border-Clock { background-color: #EBEB83; width: 300px; height:

5 ответов

Похожие вопросы