Как сделать border dashed блока с элементами разного цвета и большего размера? (конкретика на скриншоте)

Question

Помогите пожалуйста сделать бордер для блока такого типа:

У меня получилось сделать похожий, но для этого я использовал много scss кода с использованием миксина (миксин создает круговую диаграмму):

Мне пришлось создать 8 таких диаграмм с переменной $percent = 10, и каждую повернуть на 45 + 5 градусов (scss код ниже)

.border-item {
  &:not(:nth-child(6), :nth-child(7), :nth-child(8)) {
    @include pie-chart(10, 100px, 5px, #fb6d3a, none, #fff);
  }
  &:nth-child(6),
  &:nth-child(7),
  &:nth-child(8) {
    @include pie-chart(10, 100px, 5px, #ccc, none, #fff);
  }
  position: absolute !important;
  z-index: 1;
  top: 0;
  left: 0;
}
.border-item-1 {
  transform: rotate(5deg);
}
.border-item-2 {
  transform: rotate(50deg);
}
.border-item-3 {
  transform: rotate(95deg);
}
.border-item-4 {
  transform: rotate(140deg);
}
.border-item-5 {
  transform: rotate(185deg);
}
.border-item-6 {
  transform: rotate(230deg);
}
.border-item-7 {
  transform: rotate(275deg);
}
.border-item-8 {
  transform: rotate(320deg);
}

Вот еще html код:

<div class="wrap">
  <div class="image"><img src="img/image.jpg"></div>

  <div class="border-wrap">      
    <div class="border-item border-item-1"><span></span></div>
    <div class="border-item border-item-2"><span></span></div>
    <div class="border-item border-item-3"><span></span></div>
    <div class="border-item border-item-4"><span></span></div>
    <div class="border-item border-item-5"><span></span></div>
    <div class="border-item border-item-6"><span></span></div>
    <div class="border-item border-item-7"><span></span></div>
    <div class="border-item border-item-8"><span></span></div>    
  </div>
</div>

Если есть возможность как-то сжать данный код, буду рад ответу. Спасибо!

Answer 1

Я думаю в данном случаи проще всего будет с помощью svg

.border {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60vh;
  height: 60vh;
  margin: 1em auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 3 44 44'%3E%3Cpath style='fill:none;stroke:%23ff0000;stroke-width:2;stroke-miterlimit:0;stroke-dasharray:10,2.5;stroke-dashoffset:11.4;' d='M 6.2,32 A 20,20 0 0 1 8.6,14 20,20 0 0 1 25,5' /%3E%3Cpath style='fill:none;stroke:%23fffa00;stroke-width:2;stroke-miterlimit:0;stroke-dasharray:10,2.5;stroke-dashoffset:11.8' d='M 25,5 A 20,20 0 0 1 45,23 20,20 0 0 1 30,44 20,20 0 0 1 6.2,32' /%3E%3C/svg%3E");
}

.border img {
  width: 80%;
  height: 80%;
  border-radius: 50%;
}

<div class="border">
  <img src="https://cataas.com/cat?type=sq">
</div>

Answer 2

Можно совместить радиальный и конический градиент:

:root {
  --size: 150px;
  --thickness: 6px;
  --inrad2: calc((var(--size) - var(--thickness)) / 2);
  --inrad1: calc(var(--inrad2) - 1px);
}

.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  padding: 10px;
  background:
    radial-gradient(white 0 var(--inrad1), transparent var(--inrad2)),
    conic-gradient(transparent 0deg 5deg, #fb6d3a 5deg 40deg, transparent 40deg 50deg, #fb6d3a 50deg 85deg, transparent 85deg 95deg, #fb6d3a 95deg 130deg, transparent 130deg 140deg, #fb6d3a 140deg 175deg, transparent 175deg 185deg, #fb6d3a 185deg 220deg, transparent 220deg 230deg, #ccc 230deg 265deg, transparent 265deg 275deg, #ccc 275deg 310deg, transparent 310deg 320deg, #ccc 320deg 355deg, transparent 355deg);
}

.wrap img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

<div class="wrap">
  <img src="https://cataas.com/cat?type=sq">
</div>

Котиков позаимствовал у @UserTest013.

БЛОГ НА HUSL

Как сделать border dashed блока с элементами разного цвета и большего размера? (конкретика на скриншоте)

Ответы (2 шт):