CSS Only Marker Shape - css

Question

I want to create a CSS only shape that looks like a marker or guitar pick.
My Codepen demo I've been working from: http://codepen.io/Vestride/pen/otcem
// CSS Marker
// I was attempting to make this shape in CSS. The marker on the far right is an image. Next to it is SVG. The rest are my attempts :|
// stackoverflow question: http://stackoverflow.com/questions/11982066/css-only-marker-shape
// Top part is a perfect circle
// Bottom half is edges that curve out!
body {
margin: 40px 20px;
background: url(http://subtlepatterns.com/patterns/furley_bg_#2X.png) ;
background-size: 600px 600px;
}
figure {
position: relative;
float: left;
margin-left: 60px;
width: 80px;
height: 80px;
}
figure:first-child {
margin-left: 0;
}
.one {
border-radius: 50% 50% 0 50%;
background: hotpink;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.two {
background: skyblue;
border-top-left-radius: 50%;
border-top-right-radius: 50% 100%;
border-bottom-left-radius: 100% 50%;
border-bottom-right-radius: 0%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.three {
border-radius: 50%;
background: lightgreen;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.three::before {
content: '';
position: absolute;
width: 106%;
height: 106%;
background: lightgreen;
border-top-left-radius: 60%;
border-top-right-radius: 50% 100%;
border-bottom-left-radius: 100% 50%;
border-bottom-right-radius: 0%;
}
.four {
border-radius: 50% 50% 0 50%;
background: seagreen;
overflow-x: visible;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.four::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: red;
border-top-left-radius: 50%;
border-top-right-radius: 50% 100%;
border-bottom-left-radius: 100% 50%;
border-bottom-right-radius: 0%;
}
.five {
width: 80px;
height: 102px;
background-image: url(http://i.imgur.com/t80ZS.png);
/* Overlay the objective */
/*margin-left: -80px;
opacity: 0.6;*/
}
.svg {
position: relative;
float: left;
margin-left: 60px;
}
<figure class="one"></figure>
<figure class="two"></figure>
<figure class="three"></figure>
<figure class="four"></figure>
<figure class="svg">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="81px" height="104px" viewBox="0 0 81 104">
<g transform="translate(1, 1)"><path fill="#FFFFFF" stroke="#CCCCCC" stroke-width="2" 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>
</figure>
<!-- Image -->
<figure class="five"></figure>
I've been unsuccessful in replicating the curvy edges by the point. Ideally I'd like to accomplish this with one element (+pseudo elements).

Answer 1

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

Answer 2

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>

Answer 3

<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>