|
|
CSS 功能区无处不在，您可以找到大量有关它们的文章，但我们将在此处创建的文章有点特殊。我们将依靠单个元素来创建每个形状，并使用 CSS 变量来轻松控制它们。我们不会依赖固定的维度或幻数。形状将适合其内容，因此您不必担心里面的文本。 我制作了一系列 CSS 丝带形状，其中包含许多很酷的示例，在本文中，我们将研究其中的两种类型，如下图所示。 折叠丝带和旋转丝带 我将左边的丝带称为“折叠丝带”，将右边的丝带称为“旋转丝带”。 创建 CSS 折叠丝带形状 Learn to Code with JavaScript 创建折叠 CSS 功能区的第一步是定义形状的变量。 命名丝带形状的各个部分：r 表示前箭头和末端切口的深度，s 表示折叠的高度 .ribbon 两个变量将控制形状，一个变量将控制颜色。
现在让我们转向代码。我们主要依靠clip-path. 下图说明了我们将要使用的多边形形状。 将长方形丝带两端 电话号码列表 剪去 我们添加一些填充以避免剪切文本，然后应用clip-path： .ribbon { --r: 20px; /* 用。（您可以在CSS 大小调整单位概述中阅读有关该单位的更多信息。）lh Learn to Code with JavaScript 在 中clip-path，我需要切割等腰三角形的形状，为此我需要知道元素的高度。1lh等于该高度。 边长为 1lh 的角三角形 现在，为了创建折叠部分，我们仍然要使用clip-path并更新之前的多边形。最酷的一点clip-path是它可以切割元素边界“之外”。这可能听起来令人惊讶或者可能没用，因为我们没有任何外部东西，但这意味着我们可以包含盒子阴影、轮廓、伪元素等内容。 在我们的例子中，我们将依赖box-shadow. 下图说明了这个技巧。 丝带尖端下方的半圆形阴影 请注意我如何更新 来clip-path包含四个新点，其中三个位于元素之外。
由于我们要切割的部分在外面，所以它是不可见的，但是如果我们添加一个大的部分，box-shadow我们就会变得可见。我使用蓝色来说明上面的想法，但在代码中我们将使用与背景相同的颜色： 想知道如何创建第二条功能区（绿色功能区）。我们做同样的事情，但使用不同的多边形。我们采用第一个多边形并将其反转。 多边形可以这样写： clip-path: polygon(X1 Y1, X2 Y2, ..., Xn Yn) 要获得相反的形状，您可以将所有内容更改Xi为100% - Xi。就如此容易！在检查我的代码之前，请尝试使用第一个功能区的多边形单独完成此操作。 在上面的演示中，将鼠标悬停在形状上可以看到漂亮的动画。为了实现这一点，我们需要通过偏移一些点来更新悬停时的多边形。我不会在悬停时重写整个多边形，但我将定义一个 CSS 变量来控制偏移。 如果您专注于动画，您会注意到我们有三个点向左移动，三个点也向下和向左移动。 显示多边形点及其移动方向的箭头 我们用 更新Xi向左移动的点的Xi + d，用 更新Yi移动点的Yi + d。
|
|
发表于 2024-1-9 17:01:03