css - 用css放两个圆 Angular 梯形，

Question

我很难解决这个问题:

我想用 css 做这个:

如图:两个圆 Angular 的飞人(重要!)，一个带文字的飞人，一个带图片，或者图标的飞人，有图标的飞人尺寸可以细一些，但是两个飞人必须是大小相同。

我不知道是否应该使用 svg 作为背景或纯 css。如果我使用 svg，我如何在带圆 Angular 的梯形内插入文本和图标？

预先感谢您的帮助。

Answer 1

这是另一种使用一个元素和更少代码的想法。简单地依赖 skew 和两个伪元素:

.box {
  height: 100px;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.box:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 60%;
  background: blue;
  border-top-right-radius: 30px;
  transform: skewX(25deg);
  transform-origin: bottom left;
}

.box:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 40%;
  background: blue;
  border-bottom-left-radius: 30px;
  transform: skewX(25deg);
  transform-origin: top right;
}

<div class="box">
</div>