使用 clip-path 作为 header 的一部分

Question

所以我在让这个特定的剪辑路径在 Firefox 中正确显示时遇到了问题，而且我不太确定如何让它正常工作。到目前为止，它在 WebKit 浏览器中正确显示。

#banner {
  background-color: #FFFFFF;
  position: fixed;
  top: 0;
  width: 100%;
  height: 110px;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 65%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 65%);
  overflow: hidden;
}
#header {
  width: 800px;
  margin: 20px auto 10px;
  overflow: hidden;
}
#content-wrapper {
  width: 800px;
  margin: auto;
  background-color: rgba(255, 255, 255, 0.80);
  overflow: hidden;
  padding: 100px 20px 20px;
}
#logo {
  position: fixed;
  border-collapse: collapse;
}

<div id="banner">
  <div id="header">
    <div id="logo">
      <a href="#" target="_blank">
        <img src="http://placehold.it/180x46" width="180" height="46" alt="Logo" />
      </a>
    </div>
  </div>
</div>
<div id="content-wrapper">
  Content wrapper
</div>

我敢肯定这真的很简单，但我终其一生都无法弄清楚我在这里缺少什么才能让它在 Firefox 中正确显示。

Answer 1

为什么我的剪辑路径在 Firefox 中不起作用？

您的剪辑路径或使用模型没有任何问题。它在 Firefox 中不起作用，因为 CSS clip-path is not yet supported by it。 Firefox 仅支持使用 SVG 剪辑路径的 url() 语法。

如何让它在 Firefox 中运行？

如果你想让剪辑路径在 Firefox 中工作，那么你必须像下面的代码片段一样将你的 CSS 剪辑路径转换成 SVG 版本，并使用 url() 语法.将 CSS 剪辑路径转换为其等效的 SVG 非常简单，如您在代码片段中所见。您只需要使用正确的标签并将所有百分比转换为比率即可。

^{（为了可见性，我将颜色从白色更改为黄绿色。）}

#banner {
  background-color: yellowgreen;
  position: fixed;
  top: 0;
  width: 100%;
  height: 110px;
  -webkit-clip-path: url(#banner-clip);
  clip-path: url(#banner-clip);
  overflow: hidden;
}

#header {
  width: 800px;
  margin: 20px auto 10px;
  overflow: hidden;
}

#content-wrapper {
  width: 800px;
  margin: auto;
  background-color: rgba(255, 255, 255, 0.80);
  overflow: hidden;
  padding: 100px 20px 20px;
}

#logo {
  position: fixed;
  border-collapse: collapse;
}

<!-- The SVG is for the clip-path -->
<svg width="0" height="0">
  <defs>
    <clipPath id="banner-clip" clipPathUnits="objectBoundingBox">
      <polygon points="0 0, 1 0, 1 1, 0 .65" />
    </clipPath>
  </defs>
</svg>

<div id="banner">
  <div id="header">
    <div id="logo">
      <a href="#" target="_blank"><img src="http://placehold.it/180x46" width="180" height="46" alt="Logo" /></a>
    </div>
  </div>
</div>
<div id="content-wrapper">
  Content wrapper
</div>

上面的demo在IE下能用吗？如果没有，如何让它工作？

上面的演示在 IE 中仍然无法运行，因为它完全不支持 clip-path。如果您还需要 IE 支持，那么您应该取消 clip-path 并直接使用 SVG。下面的片段有一个演示。

这里所做的是我们使用 SVG 的 path 元素创建一个路径（梯形），为其提供所需的填充（背景颜色），然后将其绝对定位在 .header 内。短的形状像图像（但不是图像）。

#banner {
  position: fixed;
  top: 0;
  width: 100%;
  height: 110px;
  overflow: hidden;
}
#banner svg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}
#banner svg polygon{
  fill: yellowgreen;
}
#header {
  width: 800px;
  margin: 20px auto 10px;
  overflow: hidden;
}
#content-wrapper {
  width: 800px;
  margin: auto;
  background-color: rgba(255, 255, 255, 0.80);
  overflow: hidden;
  padding: 100px 20px 20px;
}
#logo {
  position: fixed;
  border-collapse: collapse;
}

<div id="banner">
  <svg viewBox='0 0 1 1' preserveAspectRatio='none'>
    <polygon points="0 0, 1 0, 1 1, 0 .65" />
  </svg>
  <div id="header">
    <div id="logo">
      <a href="#" target="_blank">
        <img src="http://placehold.it/180x46" width="180" height="46" alt="Logo" />
      </a>
    </div>
  </div>
</div>
<div id="content-wrapper">
  Content wrapper
</div>

有用链接：

MDN - SVG Paths - 您可以阅读有关 path 元素及其命令的更多信息。
- 您可以找到更多创建斜边形状的替代方法。

使用 clip-path 作为 header 的一部分

Using clip-path as part of header

html

css

css-shapes

clip-path