CSS
html, body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #eee;
}
.mustache {
width: 195px;
}
.mustache-left,
.mustache-right{
width: 96px;
height: 48px;
background: transparent;
border-color: #0e0e0e;
border-style: solid;
border-width: 0px 0px 50px 0px;
border-radius: 100%;
position: relative;
float: left;
transform: rotate(-45deg);
}
.mustache-left {
transform: scale(-1, 1) rotate(-45deg);
margin-right: -10px;
}
.mustache-left:before,
.mustache-right:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #0e0e0e;
border: 18px solid #0e0e0e;
border-radius: 100%;
width: 12px;
height: 12px;
}
.mustache-left:after,
.mustache-right:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: #eee;
border-radius: 100%;
width: 50px;
height: 50px;
}
