我想创建一个看起来像标记或吉他拨片的CSS形状.

我的Codepen演示我一直在工作: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!Run Code Online (Sandbox Code Playgroud)
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; …Run Code Online (Sandbox Code Playgroud)