创建非矩形页眉

在 Medium 上，Jon Moore 最近将“非矩形页眉”确定为 微型趋势。 就像：它还没有流行起来，但你等着瞧，孩子。

我们说的是页眉（或更一般地，任何容器元素）具有非矩形形状。

例如 **梯形**

或更 **复杂几何形状**

或 **圆形/椭圆形**

甚至 **屁股形状**

我认为这些也会越来越流行。 所以让我们抢先一步，讨论一下编码这些页眉的几种方法。 因为说实话，它们确实看起来很棒。

图像

也许创建上面任何非矩形页眉最简单的方法是在页眉顶部添加一个图像。

但这里有一些问题

• 响应行为？ 这些蒙版通常是全宽的，定义形状的多个宽度（例如 srcset）变得很繁琐，或者会造成光栅资产的像素化。
• 这是一个完全独立的文件，需要从服务器获取——对于简单的形状来说似乎很浪费。
• 如果您必须从设计程序重新导出图像文件，那么在浏览器中进行迭代的速度很慢。

我们可以一次解决所有这些问题。 您可能已经知道这个问题要怎么解决。

SVG

与从 Sketch 导出 JPG 相比，使用内联 SVG 性能更高、易于响应且易于迭代设计。 事实上，对于大多数情况来说，这是我推荐使用的方式。 多功能、跨浏览器、矢量，而且很棒。

对于像这样的倾斜背景，您需要做出一个选择：随着屏幕宽度的变化，角度还是两侧之间的高度差应该保持不变？

如果您希望角度保持不变，请将 SVG 的高度设置为 vw

如果您希望高度差保持不变，请将 SVG 的高度设置为像素

您不必只选择一个——我们可以对它进行响应式样式，因为 SVG 元素受媒体查询的影响。 请查看此几何风格页眉在 700 像素以下和 700 像素以上宽度时的效果。

天啊，还有什么好说的呢？ 哦，我们甚至可以制作屁股形状。

（也许用贝塞尔曲线做更合适，但您明白我的意思！）

还有一点值得注意，那就是如果您想完全在 CSS 中创建 SVG 背景，您可以保存 SVG 并将其 URL 引用到伪元素中。

header::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  background: url(divider.svg);
}

如果您在不同的场景中使用 `divider.svg` 作为重复元素，您也可以根据需要对其进行不同的颜色填充

header::after polygon {
  fill: white;
}

但这里有一个问题：如果页眉下面的部分具有复杂的背景怎么办？ 在到目前为止的所有示例中，我们都只是假设了一个纯白色背景。 如果有一个精美的渐变，或者另一个背景图像或者其他东西怎么办？ 然后呢？

clip-path

如果您在页眉下方有一个中等复杂的背景，那么此属性将派上用场，因此您希望蒙版是从非矩形页眉内部完成的，而不是由之后的元素完成的。

与类似的 SVG 语法一样，如果您想将以上响应行为从角度保持不变更改为高度差保持不变，您可以将计算的高度更改为简单的百分比。

clip-path 最大的缺点是什么？ 浏览器支持不是很好。 但是，根据您的非矩形页眉或 div 的重要程度，它可能被视为渐进增强。 在这种情况下，就用 clip-path 尽情发挥吧！

border-radius

现在，到目前为止，我们只提到了适用于生成我上面列出的所有形状的方法。 但是，如果我们知道希望页眉具有什么特定的形状，我们可能可以使用更简单的方法。

例如，凸椭圆页眉非常适合使用 `border-radius`。

而凹椭圆页眉只需在页眉之后的元素上设置 border-radius 即可。

section {
  border-bottom-left-radius: 50% 20%;
  border-bottom-right-radius: 50% 20%;
}

这种方法的另一个好处是，页眉下面部分的背景仍然可以使用背景图像。

transform: skew

如果我们知道想要创建一个梯形页眉，我们可以使用 CSS 变换来倾斜整个页眉。

这会产生一个副作用，即倾斜倾斜元素的任何子元素，因此您需要在页眉中添加一个子元素来进行倾斜，其他所有元素都将放在兄弟元素中。

Stripe 的主页设计使用了这种方法，而且更巧妙的是，他们包含了几个子跨度（每个跨度都是一个色块），这些跨度与父元素一起倾斜，创造出更复杂、更鲜艳的效果。

哪个最好？

就我而言，SVG 通常是首选。 但是，如果您在页眉下方有一个更复杂的背景，那么最佳选择取决于形状。 在这种情况下，我会调查 `skew` 或 `border-radius` 是否能够满足所需的艺术指导，或者浏览器支持是否足够好，以便使用 `clip-path`。

	允许复杂 BG 在下方	浏览器支持	可创建的形状
图像	否	是	所有
SVG	否	是	所有
Clip-path	是	否	所有
Border-radius	是	是	仅椭圆形
Transform: skew	是	是	仅梯形

---