Pushpin

HTML
<div class="pushpin"> <div class="case"></div> <div class="needle"></div> </div>
SCSS
$pbg: #28324E; $case: ( w: 100%, h: 0, ovaltop-w: 10vw, ovaltop-r: 0 0 50% 50% / 0 0 100% 100%, ovalbottom-w: 15vw, ovalbottom-r: 50% 50% 0 0 / 100% 100% 0 0 ); $needle: ( w: 1vw, h: 7vw, t: 9vw, bg: #f1f1f1 ); * { box-sizing: border-box; } body { width: 100vw; height: 100vh; display: flex; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; background: #54ACD2; } .pushpin { margin: 0 auto; width: 10vw; height: 20vw; position: relative; } .case { width: map-get($case, w); height: map-get($case, h); border: 3vw solid transparent; border-style: solid; border-color: transparent transparent #28324E transparent; border-width: 0 3vw 10vw 3vw; position: relative; top: 0; left: 0; z-index: 1; &:after, &:before { content: ""; position: absolute; height: 3vw; background: $pbg; } &:after { top: 0; left: 50%; width: map-get($case, ovaltop-w); margin-left: -5vw; border-radius: map-get($case, ovaltop-r); } &:before { width: map-get($case, ovalbottom-w); top: 7vw; left: 50%; margin-left: -7.5vw; border-radius: map-get($case, ovalbottom-r); } } .needle { width: map-get($needle, w); height: map-get($needle, h); position: absolute; top: map-get($needle, t); left: 50%; transform: translateX(-50%); background: map-get($needle, bg); &:after { content: ""; position: absolute; bottom: -1vw; left: 0; width: 0; height: 0; border-left: .5vw solid transparent; border-right: .5vw solid transparent; border-top: 1vw solid map-get($needle, bg); } }
JAVASCRIPT
Expand for more options Login