html - 如何通过底部的斜切和 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 方法，以防您想要使用它们(或者至少一些 future 的读者可能会发现它有帮助)。

使用 SVG:

使用 SVG，我们可以创建一个 path 并用图像填充它(或者)使用 SVG mask 来创建形状。 (注意:使用 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 mask 。使用带图像填充的 path 和 mask 之间的区别在于悬停区域。使用 path 时，悬停效果仅限于形状边界，而使用 mask 时，图像仍然是矩形(或正方形)，因此即使在外部也会触发悬停效果。

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 作为 mask 图像来隐藏不需要的部分。此方法目前仅适用于支持 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 在评论中提到的元素，但我觉得这里的需求有点不同，尽管两者都涉及创建不寻常的边框。}