主页 / 问题 / 1369128
Accepted
dbUser11
Asked:2022-06-07 01:43:19 +0000 UTC2022-06-07 01:43:19 +0000 UTC

如何显示圆圈的相邻部分？

  • 772

我正在实施一个块。块内应该有2个圆圈。在这种情况下，圆圈中一定有一些相邻的部分。

理想情况下，它应该看起来像这样： 我需要做什么

我能够添加 2 个圆圈（.upper-circle& .bottom-circle）。.inner-circle我以另一个附加的第三个圆圈 ( )的形式实现相邻区域。

第三圈已经投资于底部。

似乎有些东西有效，但没有任何效果。不知道你的想法对不对？也许它可以以某种方式更容易完成..？我什么都不懂。我不明白如何显示圆圈的相邻部分，通常，而不是我现在拥有的方式以及如何隐藏超出框架边界的圆圈部分......

* {
    box-sizing: border-box;
    padding: 0;
    margin: 1%;
    font-family: 'Courier New', Courier, monospace;
}

.main-block {
    display: inline-block;
    width: 30%;
    padding: 3%;
    font-weight: 900;
    color: white;
    border-radius: 10px;
}

/* Margin-top section */
.mt-medium {
    margin-top: 4%;
}

.mt-larger {
    margin-top: 7%;
}
/* End margin-top section */

/* Block colors section */
.color-first-block {
    background: linear-gradient(90deg, rgba(254,190,154,1) 0%, rgba(255,130,152,1) 100%);
}
/* End block colors section */

/* Circles-sections */
.upper-circle {
    width: 10%;
    height: 15%;
    border-radius: 50%;
    position: absolute;
    left: 24.5%;
    top: -0.5%;
    background: red;
}

.bottom-circle {
    width: 20%;
    height: 25%;
    border-radius: 50%;
    position: absolute;
    left: 20%;
    top: 10%;
    background: yellowgreen;

    overflow: hidden;
}

.inner-circle {
    width: 40%;
    height: 45%;
    border-radius: 50%;
    position: absolute;
    left: 25%;
    top: -3%;
    background: yellow;
}
/* End circles sections */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./assets/styles/reset.css">
    <link rel="stylesheet" href="./assets/styles/styles.css">
    <title>Position medium</title>
</head>
<body>
    <main>
        <!-- First block -->
        <div class="main-block color-first-block">
            <p>Weekly sales</p>
            <p class="mt-medium">$ 15.0000</p>
            <p class="mt-larger">Increased by 60%</p>

            <!-- circles section -->
            <div class="upper-circle"></div>
            <div class="bottom-circle">
                <div class="inner-circle"></div>
            </div>
            <!-- end circles section -->
        </div>
        <!-- End first block -->
    </main>
</body>
</html>

html

1 个回答

  1. Best Answer

    只需制作两个透明的圆圈即可。为了清晰起见，我用你的颜色替换了你的颜色rgba(255, 255, 255, 0.3);并稍微调整了尺寸。

    * {
    box-sizing: border-box;
    padding: 0;
    margin: 1%;
    font-family: 'Courier New', Courier, monospace;
}

.main-block {
    display: inline-block;
    width: 30%;
    padding: 3%;
    font-weight: 900;
    color: white;
    border-radius: 10px;
}

/* Margin-top section */
.mt-medium {
    margin-top: 4%;
}

.mt-larger {
    margin-top: 7%;
}
/* End margin-top section */

/* Block colors section */
.color-first-block {
    background: linear-gradient(90deg, rgba(254,190,154,1) 0%, rgba(255,130,152,1) 100%);
}
/* End block colors section */

/* Circles-sections */
.upper-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    left: 24.5%;
    top: -0.5%;
    background: rgba(255, 255, 255, 0.3);
}

.bottom-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: absolute;
    left: 15%;
    top: 20%;
    background: rgba(255, 255, 255, 0.3);

    overflow: hidden;
}
/* End circles sections */
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./assets/styles/reset.css">
    <link rel="stylesheet" href="./assets/styles/styles.css">
    <title>Position medium</title>
</head>
<body>
    <main>
        <!-- First block -->
        <div class="main-block color-first-block">
            <p>Weekly sales</p>
            <p class="mt-medium">$ 15.0000</p>
            <p class="mt-larger">Increased by 60%</p>

            <!-- circles section -->
            <div class="upper-circle"></div>
            <div class="bottom-circle"></div>
            <!-- end circles section -->
        </div>
        <!-- End first block -->
    </main>
</body>
</html>

    • 1

相关问题