如何用單個元素創建CSS功能區形狀

利用現代CSS技巧，只需少量代碼即可創建炫酷的CSS絲帶形狀！本文將演示如何使用單一元素和CSS變量創建各種絲帶形狀，並實現精美的懸停動畫效果，無需固定尺寸或魔法數字。

關鍵要點：

• 現代CSS技巧可輕鬆創建CSS絲帶形狀，僅需單個元素和CSS變量即可控制，無需固定尺寸或魔法數字。
• 創建CSS絲帶形狀涉及定義控制形狀和顏色的變量，使用clip-path裁剪所需形狀，並使用box-shadow創建絲帶的折疊部分。
• CSS lh單位（對應於line-height值）用於控製絲帶的高度，可與clip-path和CSS變量結合使用，創建出色的懸停動畫。
• 創建旋轉的CSS絲帶形狀涉及使用新的三角函數以及CSS變量和calc()，使用漸變顏色裁剪主元素的部分，並使用偽元素創建主元素後面的部分。

本文將深入探討兩種類型的CSS絲帶形狀的創建方法：折疊絲帶和旋轉絲帶。

創建折疊式CSS絲帶形狀

首先，定義絲帶形狀的變量：

.ribbon {
  --r: 20px; /* 控制丝带的切口 */
  --s: 20px; /* 折叠部分的大小 */
  --c: #d81a14; /* 颜色 */
}

接下來，主要使用clip-path屬性。下圖展示了將要使用的多邊形形狀：

添加內邊距避免裁剪文本，然後應用clip-path：

.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%); 
}

使用CSS lh單位

lh單位對應於line-height值。由於使用單行文本，line-height設置控制高度，因此1lh等效於元素的高度。在clip-path中，需要裁剪等腰三角形的形狀，為此需要知道元素的高度，1lh就等於該高度。

要創建折疊部分，仍然使用clip-path並更新先前多邊形。 clip-path的巧妙之處在於它可以裁剪元素邊界“外部”的內容。通過添加box-shadow，可以使外部被裁剪的部分可見。

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

.ribbon {
  --r: 20px; /* 控制丝带的切口 */
  --s: 20px; /* 折叠部分的大小 */
  --c: #d81a14; /* 颜色 */
}

最後，添加漸變和另一個box-shadow來完成陰影效果。

(此處省略了懸停動畫代碼以及旋轉絲帶的詳細代碼，因為篇幅過長，但保留了關鍵圖片和代碼片段。完整的代碼可以在CodePen上找到，如原文所示。 )

結論

本文探索了CSS變量、calc()和三角函數等現代CSS特性，並將其組合起來創建炫酷的絲帶形狀。 更多示例可以參考原文鏈接中的完整集合。

以上是如何用單個元素創建CSS功能區形狀的詳細內容。更多資訊請關注PHP中文網其他相關文章！