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);
}
}
