在 CSS 中绘制一个盾形图形

Question

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

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

类似这样，除了底部黑色部分。黄色和顶部黑色部分应该是同一种颜色。

有什么建议吗？

Answer 1

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

更新：

你能附上一张图片和你尝试过的答案吗？它将帮助您走上正确的道路。

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

这样的事情怎么样：

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

Answer 3

解决方案 1：透视

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

备注

我已经使用 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>

解决方案 2：边框

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

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>

解决方案 3：倾斜的元素

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>

在 CSS 中绘制一个盾形图形

Drawing a shield-like figure in CSS

css

css-shapes

解决方案 1：透视

解决方案 2：边框

解决方案 3：倾斜的元素