使用剪辑路径作为标题的一部分

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 版本，如下面的 sn-p 并使用 url() 语法。正如您在 sn-p.xml 中看到的那样，将 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。下面 sn-p 有一个演示。

这里所做的是我们使用 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 元素及其命令的更多信息。
• My Q&A on how to create a responsive shape with a slanted side - 您可以找到更多替代方法来创建具有倾斜边的形状。