Как сделать так, чтобы один элемент CSS соответствовал другому?

Question

У меня есть этот объект обращения, и я хотел бы присоединить его к другому объекту, который помещается в оранжевые круги.

Я хочу, чтобы красный объект соответствовал оранжевым кружкам

Общий результат, который я хочу сделать что-то подобное, но с кругами

HTML

Я использую vuejs для создания div-циклов

<div class="wrapper">
    <div class="circle-container">
        <div class="circle" v-for="i in 30"></div>
            <div class="test">
            <div class="circle2" v-for="i in 5"></div>
        </div>
    </div>
</div>

CSS (sass)

.circle2
    position: relative
    width: 60px
    height: 60px
    border-radius: 50%
    opacity: 0.7
    background: red

.test
    transform-origin: bottom
    transform: rotate(12deg)

.wrapper
    display: flex
    width: 100%
    height: 500px

.circle-container
    margin: 8%
    position: relative
    width: 100%
    height: 100%

.circle
    position: absolute
    top: 50%
    left: 46%
    width: 60px
    height: 60px
    border-radius: 50%
    opacity: 0.7
    background: #ffe63d


@for $i from 1 through 30
    .circle:nth-child(#{$i})
        transform: rotate($i *12deg) translateX(500%)
        @if $i == 1
            background: orange
        @if $i == 6
            background: orange

        @if $i == 11
            background: orange

        @if $i == 16
            background: orange

        @if $i == 21
            background: orange

        @if $i == 26
            background: orange

Answer 1

попробуйте это для .test:

.test {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) rotate(45deg);
}