Реализовал задачу.
У меня есть три карточки, в карточках есть 2 круга.
Эти 2 круга - чисто визуал, не про контент.
Круги реализованы с помощью двух <div>
.
Поставил задачу: убрать эти 2 <div>
из каждой карточки в index.html, и реализовать те же самые круги, но через псевдоэлементы...
Вопрос: как это сделать? Я не понимаю, к какому селектору нужно привязываться... перепробовал многое, но круги просто пропадают...
* {
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 как-то странно выполняется):
main-block
добавьте псевдоэлементы