用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>

​

Answer 2

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

您将需要使用伪:after和:before元素来获得两侧的平坦边缘(利用一侧的white边界)，然后在主元素上使用border-top-left-radius和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>

​

Answer 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>

​