HTML
<div class="periscope">
<figure class="pin">
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 81 104">
<g transform="translate(1, 1)">
<path
fill="#FFFFFF"
stroke="#FFFFFF"
stroke-width="1"
d="
M78.399,
39.2c0,
36.998-39.199,
62.599-39.199,
62.599S0,
76.198,
0,
39.2C0,
17.55,
17.551,
0,
39.2,
0 C60.848,
0,
78.399,
17.55,
78.399,
39.2z"/>
</g>
</svg>
<div class="pin-circle">
<div class="circle"></div>
</div>
</figure>
</div>
CSS
.periscope{
width: 300px;
height: 300px;
margin: 0 auto;
top:calc(50% - 150px);
left:calc(50% - 150px);
position:absolute;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#61cfdf+1,3e9fc2+100 */
background: #61cfdf; /* Old browsers */
background: -moz-linear-gradient(-45deg, #61cfdf 1%, #3e9fc2 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #61cfdf 1%,#3e9fc2 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #61cfdf 1%,#3e9fc2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#61cfdf', endColorstr='#3e9fc2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.periscope, .pin-circle, .circle
{
border-radius: 100%;
}
.pin{
width: 125px;
height: 160px;
display:block;
position: relative;
margin: 0 auto;
top: calc(100% - 230px)
}
.pin-circle{
width: 75px;
height: 75px;
top: calc(100% - 135px);
left: 25px;
position:absolute;
background-color: #E94F3C;
-webkit-box-shadow: inset 3px 3px 5px 0px rgba(162,31,0,1);
-moz-box-shadow: inset 3px 3px 5px 0px rgba(162,31,0,1);
box-shadow: inset 3px 3px 5px 0px rgba(162,31,0,1);
}
.circle{
width: 32px;
height: 32px;
background-color: #FFF;
}
