如何用单个元素创建CSS功能区形状

利用现代CSS技巧，只需少量代码即可创建炫酷的CSS丝带形状！本文将演示如何使用单一元素和CSS变量创建各种丝带形状，并实现精美的悬停动画效果，无需固定尺寸或魔法数字。

关键要点：

• 现代CSS技巧可轻松创建CSS丝带形状，仅需单个元素和CSS变量即可控制，无需固定尺寸或魔法数字。
• 创建CSS丝带形状涉及定义控制形状和颜色的变量，使用clip-path裁剪所需形状，并使用box-shadow创建丝带的折叠部分。
• CSS lh单位（对应于line-height值）用于控制丝带的高度，可与clip-path和CSS变量结合使用，创建出色的悬停动画。
• 创建旋转的CSS丝带形状涉及使用新的三角函数以及CSS变量和calc()，使用渐变颜色裁剪主元素的部分，并使用伪元素创建主元素后面的部分。

本文将深入探讨两种类型的CSS丝带形状的创建方法：折叠丝带和旋转丝带。

创建折叠式CSS丝带形状

首先，定义丝带形状的变量：

<code class="language-css">.ribbon {
  --r: 20px; /* 控制丝带的切口 */
  --s: 20px; /* 折叠部分的大小 */
  --c: #d81a14; /* 颜色 */
}</code>

接下来，主要使用clip-path属性。下图展示了将要使用的多边形形状：

添加内边距避免裁剪文本，然后应用clip-path：

<code class="language-css">.ribbon {
  --r: 20px; 
  --s: 20px; 
  --c: #d81a14;

  line-height: 1.6; /* 控制高度 */
  padding-inline: 1.2lh calc(var(--r) + .2lh);
  background: var(--c);
  clip-path: polygon(1lh 0,100% 0,calc(100% - var(--r)) 50%,100% 100%,100% 100%, 0 100%,0 100%); 
}</code>

使用CSS lh单位

lh单位对应于line-height值。由于使用单行文本，line-height设置控制高度，因此1lh等效于元素的高度。在clip-path中，需要裁剪等腰三角形的形状，为此需要知道元素的高度，1lh就等于该高度。

要创建折叠部分，仍然使用clip-path并更新先前多边形。clip-path的巧妙之处在于它可以裁剪元素边界“外部”的内容。通过添加box-shadow，可以使外部被裁剪的部分可见。

更新clip-path以包含四个新点，其中三个在元素外部：

<code class="language-css">.ribbon {
  --r: 20px; /* 控制丝带的切口 */
  --s: 20px; /* 折叠部分的大小 */
  --c: #d81a14; /* 颜色 */
}</code>

最后，添加渐变和另一个box-shadow来完成阴影效果。

(此处省略了悬停动画代码以及旋转丝带的详细代码，因为篇幅过长，但保留了关键图片和代码片段。完整的代码可以在CodePen上找到，如原文所示。)

结论

本文探索了CSS变量、calc()和三角函数等现代CSS特性，并将其组合起来创建炫酷的丝带形状。 更多示例可以参考原文链接中的完整集合。

以上是如何用单个元素创建CSS功能区形状的详细内容。更多信息请关注PHP中文网其他相关文章！