<div class="background">
<div class="star"></div>
</div>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: #333;
}
.background {
width: 400px;
height: 400px;
border-radius: 50%;
box-shadow: 0 0px 35px rgba(0, 0, 0, 0.35);
overflow: hidden;
background: white;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.star {
transform: scale(1.2);
&:before {
content: '×';
font-size: 15px;
line-height: 1;
font-weight: bold;
color: black;
position: relative;
left: -75px;
top: 60px;
text-shadow:
0px 10px black,
10px 10px black,
20px 10px black,
30px 0px black,
40px 0px black,
50px -10px black,
60px -10px black,
70px -20px black,
80px -20px black,
90px -10px black,
100px -10px black,
110px 0 black,
120px 0 black,
130px 10px black,
140px 10px black,
150px 10px black,
150px 0 black,
140px -10px black,
140px -20px black,
130px -30px black,
130px -40px black,
120px -50px black,
120px -60px black,
10px -10px black,
10px -20px black,
20px -30px black,
20px -40px black,
30px -50px black,
30px -60px black,
20px -70px black,
10px -80px black,
0px -90px black,
0px -100px black,
10px -100px black,
20px -100px black,
30px -100px black,
40px -100px black,
50px -100px black,
50px -110px black,
130px -70px black,
140px -80px black,
150px -90px black,
150px -100px black,
140px -100px black,
130px -100px black,
120px -100px black,
110px -100px black,
100px -100px black,
100px -110px black,
90px -120px black,
90px -130px black,
80px -140px black,
70px -140px black,
60px -130px black,
60px -120px black,
60px -80px black,
60px -70px black,
60px -60px black,
90px -60px black,
90px -70px black,
90px -80px black,
10px 0px #FF9100,
20px 0px #FF9100,
20px -10px #FF9100,
30px -10px #FF9100,
40px -10px #FF9100,
50px -20px #FF9100,
60px -20px #FF9100,
70px -30px #FF9100,
80px -30px #FF9100,
90px -20px #FF9100,
100px -20px #FF9100,
110px -10px #FF9100,
120px -10px #FF9100,
130px -10px #FF9100,
130px 0px #FF9100,
140px 0px #FF9100,
130px -20px #FF9100,
120px -30px #FF9100,
120px -40px #FF9100,
110px -50px #FF9100,
110px -60px #FF9100,
120px -70px #FF9100,
130px -80px #FF9100,
140px -90px #FF9100,
10px -90px #FF9100,
20px -80px #FF9100,
30px -70px #FF9100,
40px -60px #FF9100,
40px -50px #FF9100,
30px -40px #FF9100,
30px -30px #FF9100,
20px -20px #FF9100,
30px -20px #FEF119,
40px -20px #FEF119,
110px -20px #FEF119,
120px -20px #FEF119,
110px -30px #FEF119,
100px -30px #FEF119,
90px -30px #FEF119,
60px -30px #FEF119,
50px -30px #FEF119,
40px -30px #FEF119,
40px -40px #FEF119,
50px -40px #FEF119,
60px -40px #FEF119,
70px -40px #FEF119,
80px -40px #FEF119,
90px -40px #FEF119,
100px -40px #FEF119,
110px -40px #FEF119,
100px -50px #FEF119,
90px -50px #FEF119,
80px -50px #FEF119,
70px -50px #FEF119,
60px -50px #FEF119,
50px -50px #FEF119,
50px -60px #FEF119,
70px -60px #FEF119,
80px -60px #FEF119,
100px -60px #FEF119,
110px -70px #FEF119,
100px -70px #FEF119,
80px -70px #FEF119,
70px -70px #FEF119,
50px -70px #FEF119,
40px -70px #FEF119,
30px -80px #FEF119,
40px -80px #FEF119,
50px -80px #FEF119,
70px -80px #FEF119,
80px -80px #FEF119,
100px -80px #FEF119,
110px -80px #FEF119,
120px -80px #FEF119,
130px -90px #FEF119,
120px -90px #FEF119,
110px -90px #FEF119,
100px -90px #FEF119,
90px -90px #FEF119,
80px -90px #FEF119,
70px -90px #FEF119,
60px -90px #FEF119,
50px -90px #FEF119,
40px -90px #FEF119,
30px -90px #FEF119,
20px -90px #FEF119,
60px -100px #FEF119,
70px -100px #FEF119,
80px -100px #FEF119,
90px -100px #FEF119,
90px -110px #FEF119,
80px -110px #FEF119,
70px -110px #FEF119,
60px -110px #FEF119,
70px -120px #FEF119,
80px -120px #FEF119,
70px -130px #FEF119,
80px -130px #FEF119;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.