Question

因此我在Firefox中正确显示此特定剪辑路径时遇到问题，而且我并不特别确定如何使其正常工作。到目前为止，它在WebKit浏览器中正确显示。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

我确定它的确非常简单，但我不能为我的生活找出我在这里失踪的东西，以便在Firefox中正确显示。< / p>

Answer 1

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

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

如何让它在Firefox中运行？

如果您希望剪辑路径在Firefox中运行，那么您必须将CSS剪辑路径转换为SVG版本，如下面的代码段所示，并使用url()语法。将CSS剪辑路径转换为其SVG等效项非常简单，您可以在代码段中看到。您只需使用正确的标签，并将所有百分比转换为比率。

^{（我已将颜色从白色更改为黄绿色，以便于查看。）}

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

以上演示是否适用于IE？如果没有，如何使它工作？

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

这里要做的是我们使用SVG的path元素创建一个路径（梯形），给它所需的填充（背景颜色）然后将它放在{{1}内部}。形状不像图像（但不是图像）。

＆＃13;

.header

＆＃13;

#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;
}

＆＃13;

有用的链接：

MDN - SVG Paths - 您可以阅读有关<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>元素及其命令的更多信息。
My Q&A on how to create a responsive shape with a slanted side - 你可以找到更多替代方法来创建一个倾斜的形状。

使用clip-path作为标题的一部分

1 个答案: