Question

目前我正在尝试学习HTML以及CSS，并且遇到了剪辑路径。即来自website。

我的理解是使用剪辑路径（例如polygon属性）可以防止某些部分被渲染，从而允许您创建独特的背景容器。

但是，当我尝试在我的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属性显示为＆＃34;无效的属性值＆＃34;。 Firefox不需要前缀。

Answer 2

chrome中的clip-path CSS支持“-webkit-clip-path”。

使用：

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

浏览器现在将渲染效果。

了解剪辑路径

2 个答案: