<div class="container">
<div class="frame">
<div class="reactor">
<div class="support-trapezoid"></div>
<div class="support-trapezoid"></div>
<div class="support-trapezoid"></div>
<div class="triangle">
<div class="core">
<div class="core-inside"></div>
</div>
</div>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg: #000;
--bg-frame: #4b615c;
--bg-reactor: #96cfcb;
--bg-triangle: #016c97;
--bg-core: #fff7f1;
--bg-core-inside: #2a7b88;
--light: #49fae6;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: var(--bg);
}
.frame {
width: 20rem;
height: 20rem;
border-radius: 50%;
background-color: var(--bg-frame);
box-shadow: 0 0 7px 2.5px #96cfcb;
}
.reactor {
background-color: var(--bg-reactor);
width: 16rem;
height: 16rem;
border-radius: 50%;
position: relative;
top: 2rem;
margin: 0 auto;
box-shadow: inset 0px 0px 7px 6px rgba(0, 0, 0, 0.75);
border: 1px solid black;
}
.support-trapezoid {
width: 10rem;
height: 6rem;
background-color: var(--bg-frame);
clip-path: polygon(
0 0,
15% 100%,
85% 100%,
100% 0,
80% 0,
65% 75%,
35% 75%,
20% 0
);
margin: 0 auto;
}
.support-trapezoid:nth-of-type(2) {
transform: rotate(240deg);
position: absolute;
top: 8rem;
left: -1.5rem;
}
.support-trapezoid:nth-of-type(3) {
transform: rotate(117deg);
position: relative;
left: 5rem;
top: 1.6rem;
}
.triangle {
clip-path: polygon(0 0, 50% 100%, 100% 0);
width: 12rem;
height: 10rem;
background-color: var(--bg-triangle);
margin: 0 auto;
position: relative;
top: -7.1rem;
}
.core {
clip-path: polygon(0 0, 50% 100%, 100% 0);
width: 6rem;
height: 5rem;
background-color: var(--bg-core);
margin: 0 auto;
position: relative;
bottom: -1.5rem;
/* animation: coreAnimate 1.5s ease-in-out infinite alternate; */
}
.core-inside {
clip-path: polygon(0 0, 50% 100%, 100% 0);
width: 3.5rem;
height: 3rem;
background-color: var(--bg-core-inside);
margin: 0 auto;
position: relative;
bottom: -0.6rem;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.