<div class="background">
<div class="crown">
<div class="top">
<div class="center"></div>
</div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
</div>
<div class="credits">
<a href="https://dribbble.com/shots/4286598-Princess-Crown" target="_blank">Inspired by Ben Bely - Princess Crown</a>
</div>
$bg-color: #EEB3FA;
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: $bg-color;
font-family: Montserrat, Sans-serif;
}
.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;
}
.crown {
transform: rotate(15deg) scale(1.4);
}
$orange: #FF3E00;
$yellow: #FFD800;
$pink: #FF0065;
$purple: #6B006A;
.top {
&:before,
&:after {
content: "";
border-style: solid;
border-width: 28px;
width: 0;
height: 0;
top: -10px;
position: absolute;
}
&:before {
border-color: transparent transparent $yellow $yellow;
}
&:after {
border-color: transparent $yellow $yellow transparent;
right: 0;
}
.center {
&:after {
content: "";
width: 30px;
height:35px;
background: $pink;
border-radius: 50%;
position: absolute;
z-index: 2;
box-shadow: inset -8px -6px darken($pink, 10);
top: 15px;
left: 0;
right: 0;
margin: 0 auto;
}
&:before {
content: "";
width: 0;
height: 0;
border-color: transparent transparent $yellow transparent;
border-style: solid;
border-width: 38px;
position: absolute;
top: -52px;
margin: 0 auto;
left: 0;
right: 0;
}
}
}
.middle {
width: 116px;
height: 60px;
background: $yellow;
position: relative;
top: 20px;
z-index: 0px;
}
.bottom {
position: relative;
width: 100px;
height: 20px;
background: $purple;
border-radius: 100%;
border: 8px solid $orange;
box-shadow: 0 -21px $yellow,
0 -26px 0 $orange;
}
.credits {
position: fixed;
right: -100px;
top: 50%;
transform: rotate(90deg) translateY(-50%);
a {
text-decoration: none;
color: white;
}
}
View Compiled
This Pen doesn't use any external JavaScript resources.