我只能使用CSS创建此形状吗？

Question

我正在为具有特定形状的网页构建一个英雄区域，此刻，我只是将图像用作实际区域背景的叠加层，但我希望减少请求数量并想知道是否可以使用CSS完成以下形状：

因此，黑色部分是实际图像所在的位置，而白色部分是我正在尝试使用CSS构建的部分；

Answer 1

这是一个包含一个元素并用df.pivot_table(columns='dose', index=['test_num', 'test_name'], values='fail',aggfunc='first') 进行近似的想法

radial-gradient

.box {
  width: 400px;
  height: 200px;
  display:inline-block;
  overflow:hidden;
  position:relative;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:50%;
  bottom:0;
  background:
    radial-gradient(100% 116.3% at top   right, transparent 99%,#fff 100%) top,
    radial-gradient(100% 116.3% at bottom left, #fff 99%,transparent 100%) bottom;
  background-size:100% 50%;
  background-repeat:no-repeat;
}
.box:after {
  right:0;
  left:50%;
  transform:scaleX(-1);
}

body {
  background:linear-gradient(to right, purple, blue);
}

然后您可以调整左/右/下属性以通过一些oveflow和重叠来控制总体形状：

<div class="box">

</div>

.box {
  width: 400px;
  height: 200px;
  display:inline-block;
  overflow:hidden;
  position:relative;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  top:0;
  left:-2px;
  right:40%;
  bottom:-45%;
  background:
    radial-gradient(100% 116.3% at top   right, transparent 99%,#fff 100%) top,
    radial-gradient(100% 116.3% at bottom left, #fff 99%,transparent 100%) bottom;
  background-size:100% 50%;
  background-repeat:no-repeat;
}
.box:after {
  right:-2px;
  left:40%;
  transform:scaleX(-1);
}

body {
  background:linear-gradient(to right, purple, blue);
}

---

这是一个使用SVG代替<div class="box"> </div>的想法：

radial-gradient

.box {
  height: 200px;
  overflow:hidden;
  position:relative;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:50%;
  bottom:0;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" preserveAspectRatio="none"><path fill="white" d="M64 64 C56 30 8 48 0 0 L0 64 Z"/></svg>');
  background-size:100% 100%;
}
.box:after {
  right:0;
  left:50%;
  transform:scaleX(-1);
}

body {
  background:linear-gradient(to right, purple, blue);
}

这里是编辑SVG的不错的在线工具：http://jxnblk.com/paths/。只需将路径附加到网址的末尾并进行编辑；

<div class="box">

</div>