CSS Only Marker Shape

Take a look at this one, i changed their css abit: http://codepen.io/anon/pen/HLJlu


<svg x="0px" y="0px" width="32px" height="45px"
	 viewBox="38 12 128 180" style="cursor:help;" >
<style type="text/css">
	.st0{ fill:#FFF;stroke:#000;stroke-width:6;stroke-miterlimit:10;}
	.st1{fill:#FFFFFF;}
	.st2{fill:#1309FF;}
	.st3{fill:#1309FF;}
	.st4{fill:#1309FF;}
	.st6{font-size:57.2285px;}
</style>
<path class="st0" d="M158.5,73.8c0-32.3-26.2-58.4-58.4-58.4c-32.3,0-58.4,26.2-58.4,58.4c0,16.6,6.9,31.5,18,42.1
	c7.2,7.2,16.7,17.2,20.1,22.5c7,10.9,20,47.9,20,47.9s13.3-37,20.4-47.9c3.3-5.1,12.2-14.4,19.3-21.6
	C151.2,106.1,158.5,90.9,158.5,73.8z"/>
<circle class="st4" cx="100.1" cy="74.7" r="44.1"/>
		 <text x="100" y="90" class="st1 st5 st6" text-anchor="middle" >12</text>
</svg>
This will be better OR This 
<svg width="32px" height="45px" viewBox="38 12 128 180" >
  <path style="fill:#FFFFFF;stroke:#020202;stroke-width:4;stroke-miterlimit:10;" d="M158.5,73.8c0-32.3-26.2-58.4-58.4-58.4c-32.3,0-58.4,26.2-58.4,58.4c0,16.6,6.9,31.5,18,42.1c7.2,7.2,16.7,17.2,20.1,22.5c7,10.9,20,47.9,20,47.9s13.3-37,20.4-47.9c3.3-5.1,12.2-14.4,19.3-21.6C151.2,106.1,158.5,90.9,158.5,73.8z"/>
  <circle style="fill:' + color + ';" cx="100.1" cy="74.7" r="44.1"/>
  <text x="100" y="90" text-anchor="middle" style="font-size:57.2285px;fill:#FFFFFF;">12</text>
</svg>

With SVG

You can achieve the marker shape with an inline svg. The following example uses a path element with 2 cubic bezier curve commands:

svg{width:80px;height:100px;}
<svg viewbox="0 0 80 100">
  <path d="M40 99.5 C-22.5 57.5 0 0 40 0.5 C80 0 102.5 57.5 40 99.5z" stroke-width="1" stroke="grey" fill="transparent"/>
</svg>

With CSS

You can also make the marker shape with CSS only using border radius, absolute positioning and 2 pseudo elements. Note that this example uses only one div element

div{
  position:relative;
  width:80px;
  height:102px;
  overflow:hidden;
  border-radius:40px;
}
div:before, div:after{
  content:'';
  position:absolute;
  top:0px;
  width:240px;
  height:150px;
  border:1px solid green;  
}
div:before{
  left:0;
  border-top-left-radius:40px;
  border-bottom-left-radius:240px 110px;
}
div:after{
  right:0;
  border-top-right-radius:40px;
  border-bottom-right-radius:240px 110px;
}
<div></div>

Tags:

Css

Css Shapes

Recent Posts