html - 了解剪辑路径

Question

目前我正在尝试学习 HTML 和 CSS，并且遇到了剪辑路径。即从此website .

我的理解是，使用剪辑路径(例如多边形属性)可以防止某些部分被渲染，从而允许您创建外观独特的背景容器等。

但是，当我尝试在我的 HTML 代码上执行此操作时，直接复制 CSS，我没有看到类似的行为。我的行为是它只是表现得像一个大矩形。这是为什么？

这是 HTML:

<header class="myClass">

    <h1>MyHeader</h1>

    <p>COmments
    </p>

    <p>Ever More comments</p>

    <p>Yep, ever more lines of code</p>
</header>

编辑:这是 CSS。

@import url(https://fonts.googleapis.com/css?family=Oswald:300|Arimo);

html {
  font-family: 'Arimo', sans-serif;
  line-height: 1.4;
}
body {
  margin: 0;
}

header {
  color: white;
  background-color: black;

  clip-path: polygon(0 0, 100% 4%, 100% 93%, 0 100%);

  padding: 5%;
  columns: 3;
}

h1 {
  color: yellow;
  font-family: 'Oswald', sans-serif;
}

Answer 1

咨询caniuse.com有关浏览器支持此功能的信息，您会发现某些浏览器需要供应商前缀；例如，Chrome 需要 -webkit-clip-path。 MDN page也提供此信息。

您可以通过样式检查器检测到这一点。 Chrome 会将 clip-path 属性显示为“无效的属性值”。 Firefox 不需要前缀。