<body>
<div class="wrap">
<div class="circle">
<div class="inset_circle">
<div class="triangle">
<div class="text"></div>
</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;
position: relative;
}
.circle{
display: flex;
height: 100%;
justify-content: center;
align-items:center;
width: 350px;
height: 350px;
border-radius: 50%;
position: relative;
background:rgb(0, 0, 0);
box-shadow: 0 0 300px aqua;
z-index: 3;
}
.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 rgb(42, 147, 196);
position: absolute;
display: flex;
justify-content: center;
align-items:center;
z-index: 1;
}
.inset_circle:before {
content: " ";
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: 0 0 50px white ;
position: absolute;
}
.triangle{
width: 0;
height: 0;
border-left: 120px solid transparent;
border-right: 120px solid transparent;
border-bottom: 200px solid rgb(115, 0, 255);
margin-bottom: 20px ;
position: absolute;
z-index: 2;
}
Нужно что бы уголки триугльника (.triangle) "спрятались " под .circle.
Позиционировнаие везде установлено. Но срабатывает только z index - 1. Почему?
Заранее спасибо за ответ
Простой
