CSS仅标记形状

Question

我想创建一个看起来像标记或吉他拨片的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!

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>

我没有成功地复制弯曲的边缘.理想情况下,我想用一个元素(+伪元素)来实现这一点.

Answer 1

看看这个,我改变了他们的css abit:http: //codepen.io/anon/pen/HLJlu

Answer 2

使用 SVG

您可以使用内联 svg来实现标记形状。以下示例使用具有 2 个三次贝塞尔曲线命令的路径元素：

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>

带有CSS

您还可以仅使用边框半径、绝对定位和 2 个伪元素通过 CSS 制作标记形状。请注意，此示例仅使用一个 div 元素

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>