主页 / 问题 / 1369840
Accepted
dbUser11
Asked:2022-06-09 20:16:18 +0000 UTC2022-06-09 20:16:18 +0000 UTC

如何将 div 转换为伪元素？

  • 772

落实了任务。

我有三张卡片，卡片上有两个圆圈。这两个圈子纯粹是视觉上的，与内容无关。圆圈是使用两个<div>.

我设定了任务：<div>从 index.html 中的每张卡片中删除这 2 个，并实现相同的圆圈，但通过伪元素......

问：怎么办？我不明白要绑定到哪个选择器......尝试了很多东西，但圆圈消失了......

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

.icons {
    position: absolute;
    margin-left: 320px;
}

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

    overflow: hidden;

    margin-left: 28px;
}

/* Margin-top section */
.mt-medium {
    margin-top: 10px;
}

.mt-larger {
    margin-top: 25px;
}
/* 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%);
}
.color-second-block {
    background: linear-gradient(90deg, rgba(133,196,243,1) 0%, rgba(27,145,228,1) 100%);
}
.color-third-block {
    background: linear-gradient(90deg, rgba(116,218,208,1) 0%, rgba(5,209,186,1) 100%);
}
/* End block colors section */

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

.bottom-circle {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    position: absolute;
    left: 220px;
    top: 85px;
    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">
            <img class="icons" src="./assets/img/chart-line.svg" alt="chart-line">
            <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 -->

        <!-- Second block -->
        <div class="main-block color-second-block">
            <img class="icons" src="./assets/img/bookmark-outline.svg" alt="bookmark-outline">
            <p>Weekly orders</p>
            <p class="mt-medium">45,6334</p>
            <p class="mt-larger">Decreased by 10%</p>

            <!-- circles section -->
            <div class="upper-circle"></div>
            <div class="bottom-circle"></div>
            <!-- end circles section -->
        </div>
        <!-- End second block -->

        <!-- Third block -->
        <div class="main-block color-third-block">
            <img class="icons" src="./assets/img/diamond.svg" alt="diamond">
            <p>Visitors online</p>
            <p class="mt-medium">95,5741</p>
            <p class="mt-larger">Increased by 5%</p>

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

它在我的屏幕上的外观（stackoverflow 上的代码以某种方式奇怪地执行）：

在我看来如何

html

1 个回答

  1. Best Answer

    例子

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

.icons {
    position: absolute;
    margin-left: 320px;
}

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

    overflow: hidden;

    margin-left: 28px;
}

/* Margin-top section */
.mt-medium {
    margin-top: 10px;
}

.mt-larger {
    margin-top: 25px;
}
/* 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%);
}
.color-second-block {
    background: linear-gradient(90deg, rgba(133,196,243,1) 0%, rgba(27,145,228,1) 100%);
}
.color-third-block {
    background: linear-gradient(90deg, rgba(116,218,208,1) 0%, rgba(5,209,186,1) 100%);
}
/* End block colors section */

/* Circles-sections */
.main-block::before{
content: '';
    width: 300px;
    height: 300px;
    border-radius: 50%;
    position: absolute;
    left: 260px;
    top: -180px;
    background: rgba(255, 255, 255, 0.3);
}

.main-block::after{
content: '';
    width: 300px;
    height: 300px;
    border-radius: 50%;
    position: absolute;
    left: 220px;
    top: 85px;
    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">
            <img class="icons" src="./assets/img/chart-line.svg" alt="chart-line">
            <p>Weekly sales</p>
            <p class="mt-medium">$ 15.0000</p>
            <p class="mt-larger">Increased by 60%</p>
        </div>
        <!-- End first block -->

        <!-- Second block -->
        <div class="main-block color-second-block">
            <img class="icons" src="./assets/img/bookmark-outline.svg" alt="bookmark-outline">
            <p>Weekly orders</p>
            <p class="mt-medium">45,6334</p>
            <p class="mt-larger">Decreased by 10%</p>
        </div>
        <!-- End second block -->

        <!-- Third block -->
        <div class="main-block color-third-block">
            <img class="icons" src="./assets/img/diamond.svg" alt="diamond">
            <p>Visitors online</p>
            <p class="mt-medium">95,5741</p>
            <p class="mt-larger">Increased by 5%</p>
        </div>
        <!-- End third block -->
    </main>
</body>
</html>

    • 1

相关问题