CSS Mustache

HTML
<div class="mustache"> <div class="mustache-left"></div> <div class="mustache-right"></div> </div>
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; }
JAVASCRIPT
Expand for more options Login