我如何在CSS中绘制这个形状？

Question

我正试图在scss中绘制这个形状。我该怎么做呢？

到目前为止，这是我的尝试。对不起，没有意识到你需要看到我失败的尝试：https://jsfiddle.net/5dy4Lwvf/

.shape {
  width: 114px;
    height: 167px;
    -webkit-border-radius: 0 114px 0 16px/0 167px;
    -moz-border-radius: 0 114px 0 16px/0 167px;
    border-radius: 0 114px 0 16px/0 167px;
    background-color: #000;
}

Answer 1

创建一个带有红色阴影的白色圆圈。在剪切div中设置它。

悬停片段以查看最终结果

＆＃13;

＆＃13;

.base {
  width: 200px;
  height: 200px;
  overflow: hidden;
  border: solid 1px;
}
.inner {
  width: 200px;
  height: 200px;
  background-color: yellow;
  border-radius: 50%;
  margin: 60px -30px;
  box-shadow: 20px 30px red;
}
.base:hover {
  border-color: transparent;
}
.base:hover .inner {
  background-color: transparent;
}

＆＃13;

<div class="base">
  <div class="inner">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
 <g>
  <title>background</title>
  <rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
  <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
   <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
  </g>
 </g>
 <g>
  <title>Layer 1</title>
  <path id="svg_2" d="m-207.5,-278" opacity="0.5" stroke-width="1.5" stroke="#000" fill="#fff"/>
  <path stroke="#fff" id="svg_4" d="m319.5,86c43.86488,159 -39.77071,311 -36.03313,311c3.73758,0 254.15522,-1 253.53229,-1c0.62293,0 -39.36404,-286 -217.49916,-310z" stroke-opacity="null" stroke-width="1.5" fill="#ff0000"/>
 </g>
</svg>

看看这个svg！