我只能使用CSS创建此形状吗？ [英] Can I create this shape with CSS only?

问题描述

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

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

解决方案

这是一个具有一个元素且径向渐变的想法近似它

>

  .box {width：400px;高度：200px；显示：行内块；溢出：隐藏position：relative;}。box：before，.box：after {content：;位置：绝对；顶：0;左：0;正确：50％；底部：0;背景：径向渐变（右上方100％116.3％，透明99％，＃fff 100％）顶部，径向渐变（左下方100％116.3％，＃fff 99％，透明100％）底部；背景大小：100％50％； background-repeat：no-repeat;}。box：之后{右：0;左：50％; transform：scaleX（-1）;} body {background：linear-gradient（向右，紫色，蓝色）；}  

 < div class = box>< / div>  

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

< pre class = snippet-code-css lang-css prettyprint-override> .box {width：400px;高度：200px；显示：行内块；溢出：隐藏position：relative;}。box：before，.box：after {content：;位置：绝对；顶：0;左：-2px;正确：40％；底部：-45％;背景：径向渐变（右上方100％116.3％，透明99％，＃fff 100％）顶部，径向渐变（左下方100％116.3％，＃fff 99％，透明100％）底部；背景大小：100％50％； background-repeat：no-repeat;}。box：之后{右：-2px;左：40％; transform：scaleX（-1）;} body {background：linear-gradient（向右，紫色，蓝色）；}

 < div class = box>< / div>  

---

这是一个使用SVG代替放射状梯度：

  .box {高度：200像素；溢出：隐藏position：relative;}。box：before，.box：after {content：;位置：绝对；顶：0;左：0;正确：50％；底部：0; background：url（'data：image / svg + xml; utf8，< svg xmlns = http://www.w3.org/2000/svg viewBox = 0 0 64 64 reserveAspectRatio = none> < path fill = white d = M64 64 C56 30 8 48 0 0 L0 64 Z /< / svg>'）; background-size：100％100％;}。box：之后{right：0;左：50％; transform：scaleX（-1）;} body {background：linear-gradient（向右，紫色，蓝色）；}  

 < div class = box>< / div>  

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

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

I'm building a hero section for a webpage that has a particular shape, at the moment I'm just using an image as an overlay for the actual section background, but I'm looking to reduce the amount of requests I make and would like to know if the following shape can be done using CSS:

So the black part is where the actual image goes, while the white section is what I'm trying to build using CSS;

解决方案

Here is an idea with one element and radial-gradient to approximate it

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

You can then adjust left/right/bottom properties to control the overal shape by having some oveflow and overlap:

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

---

Here is an idea using SVG to replace the 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>

Here is a good online tool to edit the SVG: http://jxnblk.com/paths/. Simply append the path to the url at the end and edit it;

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

这篇关于我只能使用CSS创建此形状吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！