具有固定和百分比宽度内部柱的弯曲容器

Question

是否可以使用带有弯曲顶部的多柱容器？这里的复杂性是左列固定宽度（与其他两列不同的背景）。曲线是特殊问题。

下图说明了这个问题。 ＆＃34; red＆＃34; line是引用容器的轻微曲线。固定宽度列不允许将简单的曲线图像放置在容器的顶部。

边界半径（据我所知）无法创建轻微曲线。不确定还有什么可能。你能在图像上创建一个倒置的蒙版曲线并将其放在容器上以获得相同的效果吗？

这是下面布局的fiddle模型。

Answer 1

我希望这可以帮到你：

Jsfiddle

.wrapper {
  width: 100%;
}
.bannerImage {
  width: 100%;
  height: 200px;
  background-image: url(http://www.perfectlitter.com/wp-content/uploads/2015/10/6784063-cute-cats-hd.jpg);
  background-position: center;
  background-size: cover;
  background-color: #787878;
  position: relative;
  z-index: 5;
}
.leftCol {
  width: 175px;
  float: left;
  background-color: #ddd;
  height: 500px;
}
.mainContent {
  padding-left: 175px;
  background-color: #efefef;
}
.midCol {
  width: 60%;
  float: left;
  height: 500px;
  background-color: tomato;
}
.rightCol {
  width: 40%;
  float: left;
  background-color: #ddd;
  height: 500px;
}
.circle {
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  z-index: 15;
  top: -10px;
}
.content {
  position: relative;
  z-index: 20;
  top: -20px;
}

<div class="wrapper">
  <div class="bannerImage"></div>
  <div class="circle">
    <div class="leftCol"></div>
    <div class="mainContent">
      <div class="midCol"></div>
      <div class="rightCol"></div>
    </div>
  </div>
  <div class="content">
    <div class="leftCol"></div>
    <div class="mainContent">
      <div class="midCol"></div>
      <div class="rightCol"></div>
    </div>
  </div>
</div>