在CSS中绘制一个类似盾牌的人物

我正在寻找一种在CSS中绘制盾形图的方法.粗略地,图的下半部分应该是半圆,而上半部分应该是倒三角形/梯形的一部分.因此,在半圆结束的地方,它应该继续向上(具有小斜率).顶部应该是平的.

我知道如何绘制一个完整的圆圈,border-radius: 50%我知道如何在CSS中绘制一个带有透明边框的倒三角形,但不知怎的,我从来没有让它们正确排列.

像这样的东西,除了底部的黑色部分.黄色和顶部黑色部分应该是相同的颜色.

有什么建议？

您可以为此使用伪元素,使用透视和旋转变换进行设置以创建形状.

注意

我使用100px*100px元素进行设置,但不同尺寸(当前)需要调整:

div {
  display: inline-block;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  margin: 50px;
  background: tomato;
  position: relative;
  -webkit-perspective: 150px;
  -moz-perspective: 150px;
  -ms-perspective: 150px;
  perspective: 150px;
}
div:before {
  content: "";
  top: 0;
  left: -20%;
  position: absolute;
  background: tomato;
  height: 100%;
  width: 140%;
  transform-origin: top right;
  -webkit-transform: rotateX(-45deg);
  -moz-transform: rotateX(-45deg);
  -ms-transform: rotateX(-45deg);
  transform: rotateX(-45deg);
}