我可以仅使用CSS创建这个形状吗？

Question

我正在为一个网页构建英雄区段，它具有特定的形状。目前，我只是使用图像作为实际区段背景的覆盖层，但我想减少请求的数量，并想知道是否可以使用CSS来完成以下形状：

所以黑色部分是实际图像放置的地方，而白色部分是我正在尝试使用CSS构建的部分;

- IvanS95

---

是的，这是可能的... - Temani Afif

我想可能可以给你一个开端，<p id="rcorners1">圆角！</p> #rcorners1 { border-radius: 25px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } 此外这也许会有所帮助 - https://css-tricks.com/books/volume-i/make-heart-shape/ - aaron lilly

我能得到一个关于该看什么的建议吗？我正在寻找圆角或渐变，但我不确定什么是最好的方法，使用一堆绝对定位的 div 来构建形状似乎不太合适。 - IvanS95

@dgknca 你在挑战我吗？ :) - Temani Afif

我会亲自选择使用SVG作为背景图片。 - Seblor

Answer 1

这里有一个只有一个元素并使用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);
}

<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);
}

<div class="box">

</div>

---

这里有一个使用SVG替换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);
}

<div class="box">

</div>

这是一个优秀的在线SVG编辑工具：http://jxnblk.com/paths/。只需将路径添加到URL末尾并进行编辑即可。

http://jxnblk.com/paths/?d=M64 64 C56 30 8 48 0 0 L0 64 Z

- Temani Afif

---

@JacqueGoupil 我会尝试构建SVG来实现这样的效果，但这真的很令人印象深刻，我会看看哪个对我更好。 - IvanS95

@dgknca 改变渐变的颜色（甚至是透明的），你就能清楚地识别出这个技巧了 ;) - Temani Afif

我注意到的一件事是，我认为SVG可能更适合渐变的“边框”，对吧？因为在白色部分使用100%不会创建好看的曲线。 - IvanS95

@IvanS95 是的，这不会是完美的，但您始终可以调整不同的值以使其更好。例如，您可以使用99.5％而不是99％。我稍后还会添加我的SVG版本;) - Temani Afif