SVG опция
Для создания разноцветных секторов круга используйте stroke-dasharray
Расчет длин строк и пробелов:
Для радиуса R = 100px
Окружность = 2 * 3.1415 * 100 = 628.3 px
Чтобы получить линию, равную одной четверти круга, мы вычисляем атрибуты stroke-dasharray
628.3 / 4 = 157.075
Пробел будет равен 3/4 длины круга = 471px
Но поскольку длина синего, красного и зеленого секторов составляет чуть больше четверти круга, мы добавляем эту разницу. stroke-dasharray = "183.255 445.045"
stroke-dashoffset = "78.54"
смещает начало сектора на 1/8 окружности
Пример для одного сектора
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="250" height="250" viewBox="0 0 250 250" >
<circle cx="125" cy="125" r="100" fill="none" stroke="#d3d3d3" stroke-width="8" />
<circle id="blue" cx="125" cy="125" r="100" fill="none" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.255 445.045" stroke-dashoffset="78.54" />
</svg>
А также мы устанавливаем атрибуты для других цветовых секторов.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="250" height="250" viewBox="0 0 250 250" >
<circle id="blue" cx="125" cy="125" r="100" fill="none" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.255 445.045" stroke-dashoffset="78.54" />
<circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.255 425.045" stroke-dashoffset="281.9" />
<circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="78.54 549.76" stroke-dashoffset="340 " />
<circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.255 445.045" stroke-dashoffset="525.225 " />
</svg>
Добавьте изображение и обрежьте его, используя маску, чтобы подогнать круги
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="40%" height="40%" viewBox="0 0 250 250" >
<defs>
<mask id="msk1">
<rect width="100%" height="100%" fill="black" />
<circle cx="125" cy="125" r="100" fill="white" stroke-width="20" stroke="black" />
</mask>
</defs>
<image xlink:href="https://i.stack.imgur.com/UsGg5.jpg" x="0" y="23" width="100%" height="100%" mask="url(#msk1)" />
<circle id="blue" cx="125" cy="125" r="100" fill="none" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="78.54" />
<circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.3 425.1" stroke-dashoffset="281.9" />
<circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="80 549.7" stroke-dashoffset="345 " />
<circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="525.2 " />
</svg>
Решение является адаптивным и работает одинаково во всех современных браузерах, включая IE11
, Edge
ОБНОВЛЕНИЕ
ОП не спрашивал, но, возможно, это дополнение будет полезно ему или кому-то еще.
SVG + CSS анимация
Чтобы оживить ваше приложение, я добавляю опции анимации.
# 1. Анимация вращения обводки вокруг изображения
Оберните все круги, которые образуют многоцветную линию, тегом group
<g>
fill ="none"
заменить на fill ="transparent"
для
анимация для работы при наведении на весь круг
.student {
background: rgb(238,174,202);
background: linear-gradient(90deg, rgba(238,174,202,1) 0%, rgba(148,208,233,1) 100%);
}
.container {
display: inline-block;
width:25%;
}
#gr1 {
transform-origin:125px 125px;
-webkit-transition: -webkit-transform 1s ease-in-out;
transition: transform 1s ease-in-out;
}
#gr1:hover {
-webkit-transform: rotate(720deg);
transform: rotate(720deg);
}
<div class="student">
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 250 250" >
<defs>
<mask id="msk1">
<rect width="100%" height="100%" fill="black" />
<circle cx="125" cy="125" r="100" fill="white" stroke-width="20" stroke="black" />
</mask>
</defs>
<image id="img" xlink:href="https://i.stack.imgur.com/IzNqO.jpg" x="0" y="24" width="100%" height="100%" mask="url(#msk1)" />
<g id="gr1">
<circle id="blue" cx="125" cy="125" r="100" fill="transparent" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="78.54" />
<circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.3 425.1" stroke-dashoffset="281.9" />
<circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="80 549.7" stroke-dashoffset="345 " />
<circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="525.2 " />
</g>
</svg>
</div>
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 250 250" >
<defs>
<mask id="msk1">
<rect width="100%" height="100%" fill="black" />
<circle cx="125" cy="125" r="100" fill="white" stroke-width="20" stroke="black" />
</mask>
</defs>
<image id="img" xlink:href="https://i.stack.imgur.com/d4AlZ.jpg" x="0" y="25" width="100%" height="100%" mask="url(#msk1)" />
<g id="gr1">
<circle id="blue" cx="125" cy="125" r="100" fill="transparent" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="78.54" />
<circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.3 425.1" stroke-dashoffset="281.9" />
<circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="80 549.7" stroke-dashoffset="345 " />
<circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="525.2 " />
</g>
</svg>
</div>
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 250 250" >
<defs>
<mask id="msk1">
<rect width="100%" height="100%" fill="black" />
<circle cx="125" cy="125" r="100" fill="white" stroke-width="20" stroke="black" />
</mask>
</defs>
<image id="img" xlink:href="https://i.stack.imgur.com/YG6VN.png" x="0" y="25" width="100%" height="100%" mask="url(#msk1)" />
<g id="gr1">
<circle id="blue" cx="125" cy="125" r="100" fill="transparent" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="78.54" />
<circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.3 425.1" stroke-dashoffset="281.9" />
<circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="80 549.7" stroke-dashoffset="345 " />
<circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="525.2 " />
</g>
</svg>
</div>
</div>
2. # Анимация поворота изображения при наведении
Правила CSS используются для реализации поворота изображений
#img {
transform-origin:125px 125px;
-webkit-transition: -webkit-transform 1s ease-in-out;
transition: transform 1s ease-in-out;
}
#img:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
.student {
background: rgb(238,174,202);
background: linear-gradient(90deg, rgba(238,174,202,1) 0%, rgba(148,208,233,1) 100%);
}
.container {
display: inline-block;
width:25%;
}
#img {
transform-origin:125px 125px;
-webkit-transition: -webkit-transform 1s ease-in-out;
transition: transform 1s ease-in-out;
}
#img:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
<div class="student">
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 250 250" >
<defs>
<mask id="msk1">
<rect width="100%" height="100%" fill="black" />
<circle cx="125" cy="125" r="100" fill="white" stroke-width="20" stroke="black" />
</mask>
</defs>
<image id="img" xlink:href="https://i.stack.imgur.com/IzNqO.jpg" x="0" y="24" width="100%" height="100%" mask="url(#msk1)" />
<circle id="blue" cx="125" cy="125" r="100" fill="none" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="78.54" />
<circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.3 425.1" stroke-dashoffset="281.9" />
<circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="80 549.7" stroke-dashoffset="345 " />
<circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="525.2 " />
</svg>
</div>
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 250 250" >
<defs>
<mask id="msk1">
<rect width="100%" height="100%" fill="black" />
<circle cx="125" cy="125" r="100" fill="white" stroke-width="20" stroke="black" />
</mask>
</defs>
<image id="img" xlink:href="https://i.stack.imgur.com/d4AlZ.jpg" x="0" y="25" width="100%" height="100%" mask="url(#msk1)" />
<circle id="blue" cx="125" cy="125" r="100" fill="none" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="78.54" />
<circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.3 425.1" stroke-dashoffset="281.9" />
<circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="80 549.7" stroke-dashoffset="345 " />
<circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="525.2 " />
</svg>
</div>
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 250 250" >
<defs>
<mask id="msk1">
<rect width="100%" height="100%" fill="black" />
<circle cx="125" cy="125" r="100" fill="white" stroke-width="20" stroke="black" />
</mask>
</defs>
<image id="img" xlink:href="https://i.stack.imgur.com/YG6VN.png" x="0" y="25" width="100%" height="100%" mask="url(#msk1)" />
<circle id="blue" cx="125" cy="125" r="100" fill="none" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="78.54" />
<circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.3 425.1" stroke-dashoffset="281.9" />
<circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="80 549.7" stroke-dashoffset="345 " />
<circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="525.2 " />
</svg>
</div>
</div>