用css放两个圆形梯形，答案

【问题标题】：Put two rounded trapezes with css,用css放两个圆形梯形，
【发布时间】：2019-03-02 22:11:47
【问题描述】：

我很难解决这个问题：

我想用 css 做这个：

喜欢图片：两个带圆角的梯形（重要！），一个带文字的梯形，另一个带图片或图标的梯形，带图标的梯形尺寸可以细一些，但两个梯形都必须是大小相同。

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

提前感谢您的帮助。

【问题讨论】：

如果有可以解决您问题的答案，请不要忘记接受答案，谢谢。

标签： css svg css-shapes

【解决方案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>

【讨论】：

为我服务，谢谢，我将使用此代码
@NiñoBoy2001 欢迎您，然后别忘了接受答案 ;)

【解决方案2】：

这很复杂，但可以在纯 CSS 中实现。

您需要使用伪:after 和:before 元素来获得侧面的平坦边缘（在一侧使用white 边框），然后使用@ 987654324@ 和 border-bottom-right-radius 在主要元素上以获得曲率。排列这些值可能很复杂，但取决于您想要多少“边缘”，您可以使用这些值。

这是一个例子：

.left,
.right {
  width: 40%;
  height: 100px;
  background: blue;
  float: left;
  position: relative;
}

.left {
  border-top-right-radius: 90px;
}

.left:after {
  content: '';
  position: absolute;
  right: -21.5px;
  bottom: 0;
  border-top: 50px solid white;
  border-left: 31px solid blue;
  width: 0;
}

.right {
  margin-left: 5%;
  border-bottom-left-radius: 90px;
}

.right:before {
  content: '';
  position: absolute;
  left: -21.5px;
  top: 0;
  border-bottom: 50px solid white;
  border-right: 31px solid blue;
  width: 0;
}

<div class="left"></div>
<div class="right"></div>

【讨论】：

【解决方案3】：

这是一种使用 SVG 的方法。

.banner {
  position: relative;
  width: 570px;
  height: 96px;
  background-color: #4f81bc;
}

.banner svg {
  position: absolute;
  left: 50%;
  overflow: visible;
}

<div class="banner">
  <svg width="96" height="100%" viewBox="0 0 96 96">
    <path d="M -22,0 L 37,85 Q 48,96 59,96 L 22,96 L -37,11 Q -48,0 -59,0 Z"
          fill="#fff"/>
  </svg>
</div>

还有一个版本，其中添加了两个带有示例文本内容的单元格。

.banner {
  position: relative;
  width: 570px;
  height: 96px;
  background-color: #4f81bc;
}

.banner svg {
  position: absolute;
  left: 50%;
  overflow: visible;
}

.container {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
}

.container div {
  width: 50%;
  color: white;
  font: sans-serif;
  padding: 2em 0 0 2em;
}

.container div:nth-child(2) {
  text-align: right;
  padding: 2em 2em 0 0;
}

<div class="banner">
  <svg width="96" height="100%" viewBox="0 0 96 96">
    <path d="M -22,0 L 37,85 Q 48,96 59,96 L 22,96 L -37,11 Q -48,0 -59,0 Z"
          fill="#fff"/>
  </svg>
  <div class="container">
    <div>Text on the left</div>
    <div>Something else on the right</div>
  </div>
</div>

【讨论】：