<body>
<div class="wrap">
<div class="circle">
<div class="inset_circle">
<div class="triangle"></div>
</div>
</div>
</div>
</body>
*{ padding: 0;
margin: 0;}
html, body {height: 100% ;
background-color:black }
.wrap{
display: flex;
height: 100%;
justify-content: center;
align-items:center;
}
.circle{
display: flex;
height: 100%;
justify-content: center;
align-items:center;
width: 350px;
height: 350px;
border-radius: 50%;
position: relative;
background:black;
box-shadow: 0 0 300px aqua;
}
.circle:before {
width: 100%;
height: 100%;
content: "";
position: absolute;
border-radius: 50%;
box-shadow: -10px 10px 0 0#e8eee7;
transform: rotate( -10deg) scale(0.7, 0.7) translate(-10px, 40px) ;
filter: blur(10px)
}
.circle:after {
width: 100%;
height: 100%;
content: "";
position: absolute;
background-color: #e8eee7;
border-radius:10%;
transform: rotate(60deg) scale(0.3, 0.1) translate(0px, -1000px) ;
filter: blur(1.5rem)
}
.inset_circle{
width: 50%;
height: 50%;
background-color: black;
border-radius: 50%;
box-shadow: 0 0 10px white;
position: relative;
}
.inset_.circle:before {
content: " ";
display: block;
width: 100%;
height: 100%;
background-color: rgb(226, 43, 134);
box-shadow: 0 0 40px rgb(208, 2, 2);
position: absolute;
}
Не отображается псевдоэлемент .inset_.circle:before
Знаю, что у родителя должно быть position relative, у псевдоэлемента absolute. Но это не срабатыывает, что не учетно ?
Простой
Средний