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

Question

我很难解决这个问题：

我想用css做这个：

像图片一样：两个带圆角的梯形（重要！），一个带文字的梯形，一个带图片或图标的梯形，带图标的梯形尺寸可以细一些，但两个梯形尺寸必须相同。

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

预先感谢您的帮助。

标签： csssvgcss-shapes

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>