如何在你的网站上添加曲线

这篇文章最初发表在我的博客上。

作为前端开发人员，我们通常负责将设计转化为代码。有时，设计师想要尝试一些突破我们习以为常的矩形的创意。于是，他/她决定添加一些曲线。现在，我们的工作就是创造奇迹，让这些曲线出现在页面上。

几周前我得到了一个大致类似于这个的设计：

在这篇文章中，我将向您展示如何在元素的顶部和底部添加曲线。我将分享我的解决方案。您可能有不同的解决方案。没关系！如果有，请在下面的评论中告诉我。

在编写任何代码之前

花点时间思考设计很重要。试着想出一个策略来应对它。你可能会面临哪些挑战？它在移动设备上看起来怎么样？在桌面设备上？在宽屏设备上？你能让它在其他地方更灵活、更可重复使用吗？你想使用的技术是否得到了良好的支持，或者你是否应该考虑一些备用方案？

我们先简单分析一下当前的任务：

• 模型可以分为三个部分：顶部曲线、内容、底部曲线。顶部和底部曲线纯粹用于装饰。为了防止出现意外，主要内容元素应该以直线结尾。其他部分都不应断裂。
• 仔细观察这些曲线，我发现它们实际上是相同的。唯一的区别是其中一条曲线垂直翻转了。这对我来说很有帮助，因为我可以只导出一次曲线，然后在顶部和底部重复使用它。我们稍后会看到如何操作。

• 在更宽的屏幕上，曲线必须从边缘到边缘，而内容可以居中。

太棒了！现在我们来看一些代码。

添加主要内容

这个很简单，你可能已经做过很多次了。它有一个.container全宽的包装器，可以用来设置背景颜色和添加曲线。它.tabs-container用于保存内容。这个元素将在更宽的屏幕上居中显示。

<div class="container">
  <div class="tabs-container">
    <!-- Some content here -->
  </div>
</div>

.container {
  background-color: #026b96;
}

.tabs-container {
  color: white;
  padding: 1.5rem;
}

@media (min-width: 980px) {
  .tabs-container {
    margin-left: auto;
    margin-right: auto;
    padding: 3rem 2rem;
    width: 800px;
  }
}

这是目前的结果（CodePen）：

目前这是一个很好的基准。即使我不添加曲线，一切看起来仍然很好。

添加顶部曲线

我已经说过，曲线只是为了装饰，让元素看起来更自然。所以，img我不会像在其他地方看到的那样直接用元素添加它们，而是使用::before和::after伪元素来添加。为了让曲线在更宽的屏幕上也能显示到边缘，我将其导出为 3000x103px 的 SVG 图像。这在超宽屏幕上仍然会造成问题，但这足以说明本文的目的。

现在剩下的就是将曲线添加到元素：

.container {
  /* ... */
  position: relative;
}

.container::before {
  background: url("path/to/curve.svg") center bottom no-repeat;
  bottom: 100%;
  content: '';
  height: 103px;
  position: absolute;
  width: 100%;
}

这里有几点：

• 因为::before元素具有position: absolute，所以最好将设置position: relative在上.container。这将使::before元素停留在内.container，从而更容易移动。
• 这个background声明很有意思。它包含几个方面，但center bottom关键在于定位（由 定义）。它指定了图像相对于元素边缘的放置位置。center将图像置于 x 轴中心，而bottom将图像置于 y 轴底部。你可以尝试不同的组合。left bottom或right bottom也有效。你也可以指定background-size。试试看效果。
• 非常重要。没有它content: ''，元素​​将无法生成。
• height: 103px是 SVG 图像的高度。您的具体情况可能有所不同。
• bottom: 100%将元素的下边缘放置在 的上边缘.container。这是通过使用相对于容器高度的百分比值来实现的。感谢Andrew Bone分享此技巧。

这是目前的结果（CodePen）：

添加底部曲线

到了最后一部分了。这会很有趣的。

我在一开始就说过，底部的曲线和顶部的曲线是一样的。区别在于底部的曲线是翻转的。幸运的是，有一个 CSS 属性可以帮助我们实现这一点。我们来看看。

.container::before,
.container::after {
  background: url("path/to/curve.svg") center bottom no-repeat;
  content: '';
  height: 103px;
  position: absolute;
  width: 100%;
}

.container::before {
  bottom: 100%;
}

.container::after {
  top: 100%;
  transform: rotateX(180deg);
}

上一步中的许多代码也在这里重复了。我把::before和::after元素之间所有通用的声明放在了一起。这样我就可以在一处进行调整。

这里最重要的代码是元素transform中的属性::after。

使用该rotateX()函数，我可以沿水平轴旋转图像。这很直观，因为该值是一个角度，指定180deg该值会翻转图像。

注意：在此代码的先前版本中，我曾经scaleY(-1)实现过同样的功能。这个版本也能正常工作，但正如Andrew Bone指出的那样，rotateX()它更具可读性，也更容易理解。

这里有一件奇怪的事情值得一提。你可能已经注意到，元素的背景图像::after被设置为center bottom。这有点奇怪，因为人们会认为正确的位置应该是 ，center top因为我们将元素向下移动，但希望将其背景图像尽可能靠近顶部。center bottom在这种情况下， 实际上是正确的，因为元素被翻转了（还记得rotateX(180deg)吗？），所以它的底部现在位于顶部。你可以通过将height和设置bottom为 150px 来观察这一点，这样元素就比其背景图像更大了。

这是最终结果（CodePen）：

就是这样！现在你已经知道如何在你的网站上添加曲线或其他奇特的形状了。现在就去发挥你的创意吧！以下是我找到的一些示例，希望能给你一些灵感。

Firefox 开发者版（链接）

Atlassian（链接）

你还有其他添加曲线/形状的技巧吗？请在下方评论区留言告诉我。