如何在底部使用倾斜切口和CSS中的图像背景来实现这种形状？

Question

我有read up on various methods并使用了Clippy tool，问题是浏览器支持还没有。用CSS完成下面图像外观的最佳方法是什么？我正在尝试将形状添加为bottom-border，如下图所示，位于蓝色背景图像后面。我有没有办法通过CSS支持最新的主流浏览器？

我尝试了什么（似乎无法在Chrome和其他人中使用）：

.element {
  -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 86%, 75% 100%, 0 85%, 0 0);
  clip-path: polygon(50% 0%, 100% 0, 100% 86%, 75% 100%, 0 85%, 0 0);
}

所需的结果如下所示：

Answer 1

两位dippas的答案和misterManSam评论中的演示都很好但是只有当页面背景是纯色（然后可以用作边框颜色或渐变内）时它们才会起作用。当页面的背景是图像（或）渐变时，它们会遇到问题，它们应该通过形状的剪切部分显示。

对于这种情况，我建议使用SVG而不是CSS，因为使用CSS创建它是如此复杂，实际上并不值得付出努力。虽然您已经要求使用CSS，但我会在这里详细介绍这些SVG方法，以防您想要使用它们（或者至少有些未来的读者会觉得它有用）。

使用SVG：

使用SVG，我们可以创建一个path并用图像填充它（或）使用SVG蒙版来创建形状。 （ 注意： 使用SVG的CSS clip-path由于缺乏对IE的支持而仍处于禁止状态。）

在代码段下方使用SVG path元素创建形状，然后用图像填充它。

svg {
  height: 200px;
  width: 100%;
}
path {
  fill: url(#image);
}

/* Just for demo */

path:hover{
  cursor: pointer;
}
body {
  min-height: 100vh;
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

<svg viewBox='0 0 1024 200' preserveAspectRatio='none'>
  <defs>
    <pattern id='image' height='200' width='1024' patternUnits='userSpaceOnUse'>
      <image xlink:href='http://lorempixel.com/1024/200/nature/3' height='200' width='1024' />
    </pattern>
  </defs>
  <path d='M0,0 1024,0 1024,150 716.8,200 0,150z' />
</svg>

以下代码段使用SVG掩码。使用path与图像填充和掩码之间的区别是悬停区域。使用path时，悬停效果仅限于形状边界，而使用蒙版时，图像仍为矩形（或方形），因此即使在外部也会触发悬停效果。

svg {
  height: 200px;
  width: 100%;
}
image {
  mask: url(#masker);
}

/* Just for demo */

image:hover{
  cursor: pointer;
}
body {
  min-height: 100vh;
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

<svg viewBox='0 0 1024 200' preserveAspectRatio='none'>
  <defs>
      <mask id='masker' x='0' y='0' width='1024' height='200'>
        <polygon points='0,0 1024,0 1024,200 0,200z' fill="#fff" />
        <path d='M0,150 716.8,200 1024,150 1024,200 0,200z' fill="#000" />
      </mask>    
  </defs>
  <image xlink:href='http://lorempixel.com/1024/200/nature/3' height='200' width='1024' />
</svg>

使用CSS：

以下选项是纯CSS的最好选择，但不幸的是它的浏览器支持很差。它使用CSS linear-gradient作为掩码图像来隐藏不需要的部分。此方法目前仅在Webkit驱动的浏览器中 ，因此禁止。

.shape {
  height: 200px;
  width: 100%;
  background-image: url(http://lorempixel.com/1200/200/nature/3);
  -webkit-mask-image: linear-gradient(to top right, transparent 49.5%, white 50.5%), linear-gradient(to top left, transparent 49.5%, white 50.5%), linear-gradient(white, white);
  mask-image: linear-gradient(to top right, transparent 49.5%, white 50.5%), linear-gradient(to top left, transparent 49.5%, white 50.5%), linear-gradient(white, white);
  -webkit-mask-size: 70.5% 30%, 30% 30%, 100% 70%;
  -webkit-mask-position: bottom left, bottom right, top left;
  -webkit-mask-repeat: no-repeat;
}

body {
  min-height: 100vh;
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

<div class='shape'></div>

如果形状必须具有响应性，则产生透明切口的其他尝试会遇到问题。例如，下面的代码片段使用非常复杂的转换，定位等来实现此形状，但它没有响应（在整页模式下查看）。即使形状有响应（由于涉及复杂性），我也不会推荐这种方法，但缺乏响应性意味着这是禁止。

.shape {
  position: relative;
  height: 200px;
  width: 100%;
  overflow: hidden;
}
.shape-left,
.shape-right,
.shape img {
  position: absolute;
  height: 100%;
}
.shape-left {
  width: 75%;
  transform: skewY(5deg);
  overflow: hidden;
}
.shape-left img {
  top: -7%;
  bottom: 0px;
  width: 133.3%;
  transform: skewY(-5deg);
}
.shape-left,
.shape-left img {
  transform-origin: bottom right;
  backface-visibility: hidden;
}
.shape-right {
  right: 0%;
  width: 25%;
  transform: skewY(-10deg);
  overflow: hidden;
}
.shape-right img {
  top: -13.5%;
  left: -300%;
  width: 400%;
  transform: skewY(10deg);
}
.shape-right {
  transform-origin: bottom left;
  backface-visibility: hidden;
}
/* just for demo */

.reference {
  height: 200px;
  width: 100%;
}
.reference img {
  height: 100%;
  width: 100%;
}
* {
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  background-image:radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

<div class='shape'>
  <div class='shape-left'>
    <img src='http://lorempixel.com/800/200/nature/3' />
  </div>
  <div class='shape-right'>
    <img src='http://lorempixel.com/800/200/nature/3' />
  </div>
</div>

<hr>

<div class='reference'>
  <img src='http://lorempixel.com/800/200/nature/3' />
</div>

^{注意： This可能是misterManSam在评论中引用的项目，但我觉得这里的需求有点不同，即使两者都涉及创建不寻常的边框。功能}

Answer 2

您可以使用background-image上的div和使用它的两个形状伪选择器:before/:after

这样的事情：

.bg {
  background: url(http://lorempixel.com/1600/900) no-repeat center top;
  min-height: 100px;
  min-width: 200px;
  position: relative
}
.bg:before {
  content: "";
  border-bottom: 65px solid white;
  border-right: 575px solid rgba(0, 0, 0, 0);
  position: absolute;
  left: 0;
  bottom: 0;
}
.bg:after {
  content: "";
  border-bottom: 65px solid white;
  border-left: 200px solid rgba(0, 0, 0, 0);
  position: absolute;
  right: 0;
  bottom: 0;
}

<div class="bg"></div>

Answer 3

我认为最简单的方法是在父div元素上使用伪元素。这是基本的CSS知识，可以很容易地实现。父div需要设置position: relative;属性集，其余部分由:: before和:: after元素完成。

.background::before {
      transform: rotate(10deg);
      position: absolute;
}

Example

希望这有帮助。