SCSS
@import "compass/css3";
* {
box-sizing: border-box;
}
html, body {
height: 100%;
width: 100%;
}
body {
background: #000;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
background: #000;
width: 200px;
height: 200px;
border-radius: 50%;
position: relative;
box-shadow: 0 0 0 30px white,
0 0 0 45px #000,
0 0 0 75px white;
}
.tree {
background: white;
width: 30px;
height: 170px;
left: 50%;
position: absolute;
margin-left: -15px;
z-index: 3;
bottom: 0;
box-shadow: 0 -240px 0 #000;
}
.tree:after, .tree:before {
content: "";
background: white;
height: 35px;
width: 60px;
position: absolute;
box-shadow: 0 45px 0 white,
0 90px 0 white;
}
.tree:after {
transform: skewY(-25deg);
right: 14px;
}
.tree:before {
transform: skewY(25deg);
left: 14px;
}
.filler {
position: relative;
width: 100%;
height: 100%;
}
.filler {
position: absolute;
width: 30px;
height: 40px;
background: #000;
width: 40px;
height: 30px;
top: 50%;
margin-top: -15px;
left: -40%;
box-shadow: 320px 0 0 #000;
}
.filler:after {
content: "";
position: absolute;
width: 30px;
height: 40px;
background: #000;
transform: rotate(-45deg);
top: -117px;
left: 47px;
}
.filler:before {
content: "";
position: absolute;
width: 30px;
height: 40px;
background: #000;
transform: rotate(45deg);
top: -117px;
left: 280px;
}
