Question

我正在尝试使一组元素位于网页的左上角。当浏览器达到最大时，元素看起来很好。但是，当浏览器的宽度小于最大元素的宽度（927像素的外圆）时，将出现水平滚动条。我想这样做，以便元素按比例缩小并且水平滚动条不会出现。我可以使用媒体查询来调整所有单个元素的大小，但是我想知道是否有更好的方法。

我尝试将组插入引导栏，但没有任何反应。我还尝试将元素大小设置为vw（例如，将.inner-circle的宽度和高度设置为20vw）。这一直有效，直到我开始调整浏览器的大小，并且元素从页面移开。

HTML：

<div class="corner">
        <div class="moon"></div>
        <div class="inner-circle"></div>
        <div class="mid-circle"></div>
        <div class="outer-circle"></div>
</div>

CSS：

.moon{
    position: absolute;
    width: 240px;
    height: 240px;
    left: 170px;
    top: -40px;   

    border-radius: 50%;
    box-shadow: -80px 50px white;
}                   
.inner-circle {
    position: absolute;
    width: 635px;
    height: 598px;
    left: -134px;
    top: -300px;

    border-radius: 50%;
    background:rgba(229, 227, 238, 0.5);
    opacity: 0.4;
}
.mid-circle {
    position: absolute;
    width: 841px;
    height: 795px;
    left: -240px;
    top: -400px;

    border-radius: 50%;
    background: rgba(229, 227, 238, 0.5);
    opacity: 0.3;
}
.outer-circle {
    position: absolute;
    width: 927px;
    height: 902px;
    left: -230px;
    top: -410px;

    border-radius: 50%;
    background: rgba(229, 227, 238, 0.5);
    opacity: 0.2;
}

Answer 1

您以px为单位给出了值。最好给出百分比，以便相对于屏幕进行调整。或者尝试给出相对于父级div“ corner”的位置。

Answer 2

尝试使用以下css属性：

max-width: (your width)px;
width: 100%;

随着屏幕尺寸开始变得小于设置的宽度，这将减小div的尺寸。

缩小CSS形状组

2 个答案: