Изогнутый переливающийся полукруг с помощью border

Question

Есть такой макет:

Я попробовал сделать вот таким образом:

.semicircle1{
    width: 61%;
    height: 350px;
    border: 8px solid rgba(3, 17, 99, 1);
    border-radius: 0 350px 350px 0;
    border-left: none ;
    border-bottom: rgba(255, 255, 255, 0.81);
}
.circle1{
    width: 75%;
    height: 300px;
    border: 10px solid rgba(3, 17, 99, 1); 
    border-radius: 50%;
    margin-top: 4%;
    margin-left: 16%;
    
}
.semicircle2{
    width: 55%;
    height: 350px;
    border: 8px solid rgba(219, 94, 70, 1);
    border-radius: 350px 0 0 350px;
    border-right: none ;
    border-bottom: rgba(255, 255, 255, 0.81);
    border-top:  rgba(255, 255, 255, 0.81);
    margin-left: 7%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.circle2{
    width: 87%;
    height: 300px;
    border: 10px solid rgba(219, 94, 70, 1); 
    border-radius: 50%;
}
.number1, .number2 {
    text-align: center;
    margin-top: 15%;
    font-size: 10.993rem;
}

.number2{
    color:rgba(3, 17, 99, 1);
}
.number1{
    color:rgba(219, 94, 70, 1);
}

<div class="semicircle1">
     <div class="circle1">
         <div class="number1">4</div>
     </div>
 </div>
 <div class="semicircle2">
     <div class="circle2">
         <div class="number2">8</div>
     </div>
 </div>

Как сделать так чтоб border не сужался на стыках?

Answer 1

main {
  --last-color: transparent;
  display: grid;
  gap: 1.5rem;
  justify-content: center;
  padding: 1.5rem 0;
  position: relative;
  background:
    linear-gradient(to bottom, blue, blue 2em, transparent 2em),
    linear-gradient(to top, var(--last-color), var(--last-color) 2em, transparent 2em),
    repeating-linear-gradient(to bottom, white, blue 1em, blue 5.5em, white 6.5em, red 7.5em, red 12em, white 13em);
  background-position-y: 0, 0, .75rem;
  overflow: hidden;
}

main:has(> :last-child:nth-child(odd)) {
  --last-color: blue;
}

main:has(> :last-child:nth-child(even)) {
  --last-color: red;
}

main::before, main::after {
  content: "";
  position: absolute;
  inset: .5em 50% auto 0;
  border-top: .5em solid black;
  mix-blend-mode: lighten;
  box-shadow: 0 0 0 1em white;
  clip-path: inset(-1em 0 -1em 0);
}

main::after {
  inset: auto 0 .5em 50%;
}

section {
  position: relative;
}

section::before, section::after {
  content: "";
  position: absolute;
  inset: -1rem;
  border: .5rem solid black;
  border-radius: 50%;
  clip-path: inset(-1em -100vmax -1em 50%);
  mix-blend-mode: lighten;
  background: white;
  box-shadow: 0 0 0 100vmax white;
}

section::after {
  inset: 0;
  border: none;
  clip-path: inset(0 50% 0 -100vmax);
}

section:nth-child(even)::before {
  clip-path: inset(-1em 50% -1em -100vmax);
}

section:nth-child(even)::after {
  clip-path: inset(0 -100vmax 0 50%);
}

div {
  font-size: 4em;
  line-height: 1;
  width: 1em;
  aspect-ratio: 1;
  border-radius: 50%;
  text-align: center;
  border: .5rem solid blue;
  color: red;
  position: relative;
  z-index: 1;
}

section:nth-child(even) > div {
  border-color: red;
  color: blue;
}

<main>
  <section><div>0</div></section>
  <section><div>1</div></section>
  <section><div>2</div></section>
  <section><div>3</div></section>
  <section><div>4</div></section>
  <section><div>5</div></section>
  <section><div>6</div></section>
  <section><div>7</div></section>
  <section><div>8</div></section>
  <section><div>9</div></section>
</main>

БЛОГ НА HUSL

Изогнутый переливающийся полукруг с помощью border

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