Map Pin Styling

by Pete Fecteau

HTML

<div class="asset-pin-wrapper">
 <div class="asset-icon"></div>
 <div class="asset-pin"></div>
</div>

CSS

body{background-color:#888}
.asset-pin-wrapper{
  filter: drop-shadow(0px 5px 3px rgba(0, 0, 0, 0.4));
  width:47px;
  height:66px;
}
.asset-icon{
  position: fixed;
  top: 8px;
  left: 50%;
  margin-left:-17px;
  display: inline-block;
  width: 32px;
  height: 32px;
  background-color: red;
}
.asset-pin{
  width:47px;
  height:66px;
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.0.1  SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 47 65.5' style='enable-background:new 0 0 47 65.5%3B' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st0%7Bclip-path:url(%23SVGID_00000165948902886756091740000011200270053286425222_)%3Bfill:%23FFFFFF%3B%7D%3C/style%3E%3Cg%3E%3Cdefs%3E%3Cpath id='SVGID_1_' d='M38 0c5 0 9 4 9 9v33c0 5-4 9-9 9h-6l-6.7 13.4c-0.5 1-1.7 1.4-2.7 0.9c-0.4-0.2-0.7-0.5-0.9-0.9L15 51H9c-5 0-9-4-9-9V9c0-5 4-9 9-9H38z'/%3E%3C/defs%3E%3Cuse xlink:href='%23SVGID_1_' style='overflow:visible%3Bfill-rule:evenodd%3Bclip-rule:evenodd%3Bfill:%23FFFFFF%3B'/%3E%3CclipPath id='SVGID_00000008847748433319981200000006298872612958114205_'%3E%3Cuse xlink:href='%23SVGID_1_' style='overflow:visible%3B'/%3E%3C/clipPath%3E%3Crect x='-1' y='-1' style='clip-path:url(%23SVGID_00000008847748433319981200000006298872612958114205_)%3Bfill:%23FFFFFF%3B' width='49' height='67.8'/%3E%3C/g%3E%3C/svg%3E");
}