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

Question

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

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

这样的东西，除了底部的黑色部分。黄色和顶部黑色部分应该都是相同的颜色。

有什么建议吗？

Answer 1

Soln 1：Perspective

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

注意

我使用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);
}

<div></div>

---

Soln 2：Borders

您可以使用边框创建带有伪元素的梯形形状，并相应地放置它。但是，这在缩放方面留下了与第一个解决方案相同的问题（因为边框不接受百分比作为宽度值） - 因此需要根据大小进行更改。

div {
  display: inline-block;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  margin: 50px;
  background: tomato;
  position: relative;
}
div:before {
  content: "";
  top: 0;
  left: -20%;
  position: absolute;
  height: 0;
  width: 100%;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 57px solid tomato;
}

<div></div>

---

Soln 3：Skewed Elements

div {
  margin: 100px;
  height: 100px;
  width: 100px;
  background: tomato;
  border-radius: 0 0 50% 50%;
  position: relative;
}
div:before {
  content: "";
  position: absolute;
  top: 5%;
  right: -10%;
  height: 50%;
  width: 60%;
  background: tomato;
  transform: rotate(90deg) skewY(10deg);
}
div:after {
  content: "";
  position: absolute;
  top: 5%;
  left: -10%;
  height: 50%;
  width: 60%;
  background: tomato;
  transform: rotate(90deg) skewY(-10deg);
}

<div></div>

Answer 2

我假设你想要这样的东西？希望这能让你走上正轨。

<强>更新

您可以添加图片和尝试的答案吗？这将有助于让你走上正确的道路。

#shield {
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 20px solid yellow;
    position: relative;
    top: -50px;
}
#shield:after {
    content: '';
    position: absolute;
    left: -50px; top: 20px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top: 70px solid yellow;
}

上一个答案：

#shield {
  width: 0px;
  height: 0px;
  border-top: 60px solid transparent;
  border-right: 60px solid yellow;
  border-left: 60px solid yellow;
  border-bottom: 60px solid yellow;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}

Answer 3

这样的事情怎么样：

.shield {
  display: block;
  border: 10px solid black;
  border-radius: 50%;
  width: 0;
  position: relative; 
}

.shield:after {
  content: "";
  display: block;
  position: absolute;
  border-color: black transparent transparent;
  border-style: solid;
  border-width: 15px 2px 0 2px;
  top: -14px;
  left: -11px;
  width: 18px;
}