css - 平滑的 css 径向渐变切口

Question

大家好，我正在尝试使用 CSS 来创建裁剪效果，但它的颗粒感很强。所以我创建了一个 fiddle 来展示它的外观:

http://jsfiddle.net/n0p25hq8/5/

我用于剪切效果的 CSS 是:

section.services .item-2 .text::before{
content:'';
position:absolute;
width:100%;
height:2em;
left:0;
right:0;
top:-2em;
margin:0 auto;
background:radial-gradient(ellipse 60% 2em at 50% 0,transparent 100%,#fff 0);
z-index:-1
}

如果有人能帮助我顺利进行，那就太好了!

Answer 1

不是::before 上的径向背景，而是使用带有一些重新定位的边界半径:

对于元素 2 - 预先存在的 css 减去径向背景:

section.services .item-2 .text::before{
   content:'';
   position:absolute;
   width:100%;
   height:2em;
   left:0;right:0;top:-2em;margin:0 auto;
/* background:radial-gradient(ellipse 60% 2em at 50% 0, transparent 100%,#fff 0); */
z-index:-1}

为元素 2 提供白色背景，以便::before 黑色背景与其相对并降低高度以使其与元素 1 和 3 正确对齐:

section.services .item-2{
  background: white;
  box-sizing:border-box;
  height:163px;
}

将文本与第 1 项和第 3 项中的文本对齐:

section.services .item-2 .text{
  padding-top:1px;
}

底部边界半径，宽度大于 100% 并向左分流以创建正确的曲率:

section.services .item-2 .text::before{
  content:'';
  position:absolute;
  top:-4em;
  transform:translateX(-5%);
  width:110%;
  height:2em;left:0;right:0;margin:0 auto;
  display:block;
  background:#000;
  border-radius: 0 0 100% 100%;
}

更新的 jsfiddle:http://jsfiddle.net/n0p25hq8/7/