如何使一个 CSS 元素适合另一个？答案

【问题标题】：How can I make one CSS element fit another?如何使一个 CSS 元素适合另一个？
【发布时间】：2019-05-13 13:09:49
【问题描述】：

我有这个流通对象，我想将它与另一个适合橙色圆圈的对象加入。

我希望红色对象适合橙色圆圈

我想做类似的事情但有圈子的总结果

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

【问题讨论】：

您希望橙色圆圈显示为黄色？还是希望它们在大圆圈内作为星形（您用箭头标记的内容）？？
@לבנימלכה 在圆圈内，红色圆圈与橙子接触
顺便说一句：@if $i == 1 or $i == 6 or $i == 11 or $i == 16 or $i == 21 or $i == 26 { background: orange; }
在canvas 上绘制元素。然后，您可以确保像素完美的放置和对齐。

标签： css sass geometry

【解决方案1】：

试试这个.test：

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

【讨论】：

添加另一个红色圆圈对象看起来不完全