用css放两个圆形的梯形图,

Question

我很难解决这个问题:

我想用css做这个:

像图片一样:两个带有圆角的梯形(重要!),一个带有文字的梯形,另一个带有图片或图标,带有图标的梯形的大小可以更薄,但两个梯形必须是相同的大小.

我不知道是否应该使用svg作为背景或纯css.如果我使用svg,我如何在圆角内的空格中插入文本和图标？

预先感谢您的帮助.

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>