如何在css中绘制此形状？

我正在用scss画这个形状。我该怎么做？

这是我迄今为止的尝试。抱歉，未意识到您需要查看我失败的尝试：

背景
第一层

---

看看这个svg

创建一个带有红色阴影的白色圆圈。在剪裁div中设置此选项

将代码段悬停以查看最终结果

.base{
宽度：200px；
高度：200px；
溢出：隐藏；
边框：实心1px；
}
.内部{
宽度：200px；
高度：200px；
背景颜色：黄色；
边界半径：50%；
利润率：60px-30px；
盒影：20px 30px红色；
}
.基地：悬停{
边框颜色：透明；
}
.base:悬停。内部{
背景色：透明；
}

您能告诉我们您尝试过什么吗？如果您确实在尝试，请告诉我们您的尝试。如果没有，你应该试试。你可以使用svg。谢谢，但我正在寻找css。请你详细说明一下你想要实现的目标。我想创建一个css徽标。它由三个形状组成，我可以很容易地放置它们：before和after。其他形状很容易用css创建。我只需要找到一种方法来创建这个。我包含了一个指向JSFIDLE尝试的链接。您看过css剪辑路径了吗？工作太多了。我想你是对的，我就用SVG。聪明的解决方案！

.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;
}

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