記錄--純CSS實現騷氣紅絲帶

来源:https://www.cnblogs.com/smileZAZ/archive/2023/10/11/17757926.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 在本文中，我們將探討如何使用 CSS 以最少的代碼創造出精美的 CSS 絲帶形狀,並最終實現下麵這個效果： 下麵我們使用html和css來實現這個效果。我們使用內容自適應方式佈局，不用擔心裡面的文字長度。本文介紹兩種絲帶：左側的絲帶稱為“ ...


這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

在本文中，我們將探討如何使用 CSS 以最少的代碼創造出精美的 CSS 絲帶形狀,並最終實現下麵這個效果：

下麵我們使用html和css來實現這個效果。我們使用內容自適應方式佈局，不用擔心裡面的文字長度。本文介紹兩種絲帶：左側的絲帶稱為“摺疊絲帶”，右側的絲帶稱為“旋轉絲帶”。

通過CSS創建摺疊絲帶形狀

首先要實現摺疊 CSS 絲帶，先定義形狀的變數。

.ribbon {
  --r: 20px; /* 控制絲帶的切割效果 */
  --s: 20px; /* 摺疊部分的尺寸 */
  --c: #d81a14; /* 顏色控制 */
}

--r和--s這兩個變數控制形狀，--c控制顏色。

如果要在CSS中實現多邊形，我們可以使用css的 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 中，我們使用這個高度來切割等腰三角形的形狀。如下圖：

接著我們需要創建摺疊部分，需要使用 clip-path 更新上面的多邊形。 clip-path 可以切割元素邊界的外部區域，包括盒子陰影、輪廓、偽元素等。

在下麵示例中，利用 box-shadow 配合clip-path 來實現切割。通過更新 Xi 和 Yi 來切割多邊形的四個新點，其中三個點位於元素的外部區域。因為我們要切割的部分在外部，但是它是不可見的，這裡我們添加了大的 box-shadow 讓元素變得可見。代碼如下：

.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%, 1lh 100%, 1lh calc(100% + var(--s)), .5lh calc(100% + var(--s) + var(--r)), 0 calc(100% + var(--s)), 0 100%);
  box-shadow: 0 0 0 999px var(--c); /* 較大的陰影擴散半徑 */
}

最後通過引入漸變和另一個框陰影，就實現了陰影效果。到這裡我們的 CSS 絲帶形狀已經成型了。

現在介紹如何創建第二種形狀（綠色絲帶）。這裡使用相同的方法，用第一個多邊形並將其反轉一下。

這樣寫：

clip-path: polygon(X1 Y1, X2 Y2, ..., Xn Yn)

要獲得相反的形狀，我們將所有 Xi 更改為 100% - Xi！在查看代碼之前，大家嘗試單獨使用第一個形狀的多邊形來實現這一點。

在上面的動畫中，當滑鼠懸停在形狀上時，可以看到漂亮的展開收起動畫。為了實現這一點，需要通過偏移一些點來更新懸停時的多邊形。這裡不需要重新編寫整個多邊形，可以重新定義一個 CSS 變數來控制偏移。

如果大家關註動畫部分，就會註意到有三個點向左移動，同時有三個點向下和向左移動。

修改 Xi 的點向左移動，修改 Yi 的點向下和向左移動來實現這一點。然後再修改 d 以控制這一運動：

.ribbon {
  --d: 0px; /* 這將控制偏移量 */
  clip-path: polygon(calc(1lh + var(--d)) 0, 100% 0, calc(100% - var(--r)) 50%, 100% 100%, calc(1lh + var(--d)) 100%, calc(1lh + var(--d)) calc(100% + var(--s) + var(--d)), calc(.5lh + var(--d)) calc(100% + var(--s) + var(--r) + var(--d)), var(--d) calc(100% + var(--s) + var(--d)), var(--d) 100%);
}
.ribbon:hover {
  --d: .2lh;
}

部分同學第一次看到這種多邊形，可能會感到困惑，因為它看起來有些複雜。我們從一個簡單的多邊形開始，然後逐步添加更多點和計算，最終得到這個複雜的多邊形。

創建旋轉的 CSS 絲帶形狀

現在讓我們處理第二種形狀。對於這種形狀，我們將使用新的三角函數以及 CSS 變數和 calc()，方法與前一個形狀類似。為了理解這個形狀背後的邏輯，讓我們旋轉它並確保文本保持在一條直線上。

下麵添加了一些透明度以查看主要元素背後的部分，然後使用偽元素來創建這些部分。這裡添加了藍色輪廓來說明元素的區域。該形狀將由兩個變數控制：

.ribbon {
  --r: 30px;  /* 控制絲帶的切割效果 */
  --a: 15deg; /* 控制旋轉角度 */
}

其中 r 的作用與前一個形狀相同。a 將控制主要元素的旋轉。

下麵我們從主要元素開始說。從圖中我們可以看到，我們需要從每一面切割它，但是這次不能使用 clip-path，我們將使用漸變顏色，其中需要切割的部分需要使用透明的顏色：

.ribbon {
  --r: 30px;  /* 控制絲帶的切割效果 */
  --a: 15deg; /* 控制旋轉角度 */

  background:
    linear-gradient(calc(90deg + var(--a)),
      #0000 calc(1lh*sin(var(--a))),
      var(--c) 0 calc(100% - 1lh*sin(var(--a))),
      #0000 0
    );
}
效果如圖：

這裡的高度等於 1lh/cos(a)。寬度等於 (100% - x)*cos(a)，其中 100% 是主要元素的寬度，x 是我們帶有透明度的那一小部分，它等於 1lh*tan(a)。

兩個偽元素具有相同的尺寸，代碼如下：

.ribbon:before,
.ribbon:after {
  content: "";
  position: absolute;
  height: calc(1lh/cos(var(--a)));
  width: calc(100%*cos(var(--a)) - 1lh*sin(var(--a)));
}

在確定尺寸後，我們需要正確定位每個偽元素，並對其進行旋轉和切割：

.ribbon:before,
.ribbon:after {
  content: "";
  position: absolute;
  transform: translate3d(0,0,-1px);
  rotate: var(--a);
  height: calc(1lh/cos(var(--a)));
  width: calc(100%*cos(var(--a)) - 1lh*sin(var(--a)));
  background: color-mix

(in srgb,var(--c),#000 40%);
}
h1:before {
  right: 0;
  top: 0;
  transform-origin: top right;
  clip-path: polygon(0 0,100% 0,100% 100%,0 100%,var(--r) 50%);
}
h1:after {
  left: 0;
  bottom: 0;
  transform-origin: bottom left;
  clip-path: polygon(0 0,100% 0,calc(100% - var(--r)) 50%,100% 100%,0 100%);
}

這裡代碼應該比較清晰易懂，clip-path 的值應該也容易理解。要註意的是，我們使用了 color-mix() 函數，這個屬性允許創建主顏色的深色版本。現在如果我們將元素旋轉相反的方向，就會得到旋轉的 CSS 絲帶形狀。

完整代碼

<h1>I am a ribbon</h1>
<h1 class="alt">I am a ribbon</h1>
@property --a {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: true;
}

h1 {
  --r: 30px;  /* control the cutout of the ribbon */
  --a: 15deg; /* control the rotation (only positive values) */
  --c: #d81a14;
  
  line-height: 1.6; /* this will control the height */
  padding-inline: .5lh; /* OR calc(tan(var(--a))*1.5lh) */
  color: #fff;
  background:
    linear-gradient(calc(90deg + var(--a)),
      #0000 calc(1lh*sin(var(--a)) - 1px),
      var(--c) calc(1lh*sin(var(--a))) calc(100% - 1lh*sin(var(--a))),
      #0000 calc(100% - 1lh*sin(var(--a)) + 1px)
    );
  position: relative;
  rotate: calc(-1*var(--a));
  transform-style: preserve-3d;
  transition: --a .5s;
  cursor: pointer;
  white-space: nowrap;
}
h1.alt {
  --c: #8FBE00;
  rotate: var(--a);
  background:
    linear-gradient(calc(90deg - var(--a)),
      #0000 calc(1lh*sin(var(--a)) - 1px),
      var(--c) calc(1lh*sin(var(--a))) calc(100% - 1lh*sin(var(--a))),
      #0000 calc(100% - 1lh*sin(var(--a)) + 1px)
    );
}
h1:before,
h1:after{
  content: "";
  position: absolute;
  transform: translate3d(0,0,-1px);
  rotate: var(--a);
  height: calc(1lh/cos(var(--a)));
  width: calc(100%*cos(var(--a)) - 1lh*sin(var(--a))) ;
  background: color-mix(in srgb,var(--c),#000 40%);
  pointer-events: none;
}
h1.alt:before,
h1.alt:after {
  rotate: calc(-1*var(--a));
}
h1:before {
  right: 0;
  top: 0;
  transform-origin: top right;
  clip-path: polygon(0 0,100% 0,100% 100%,0 100%,var(--r) 50%);
}
h1.alt:before {
  bottom: 0;
  top: auto;
  transform-origin: bottom right;
}
h1:after {
  left: 0;
  bottom: 0;
  transform-origin: bottom left;
  clip-path: polygon(0 0,100% 0,calc(100% - var(--r)) 50%,100% 100%,0 100%);
}
h1.alt:after {
  top: 0;
  bottom: auto;
  transform-origin: top left;
}

h1:hover {
  --a: 0deg;
}

/* we fallback to something else if lh is not supported
   1lh = 1.6em (the line-height value)
*/
@supports not (height:1lh) {
  h1 {
    padding-inline: .8em; 
    background:
      linear-gradient(calc(90deg + var(--a)),
        #0000 calc(1.6em*sin(var(--a)) - 1px),
        var(--c) calc(1.6em*sin(var(--a))) calc(100% - 1.6em*sin(var(--a))),
        #0000 calc(100% - 1.6em*sin(var(--a)) + 1px)
      );
  }
  h1.alt {
    background:
      linear-gradient(calc(90deg - var(--a)),
        #0000 calc(1.6em*sin(var(--a)) - 1px),
        var(--c) calc(1.6em*sin(var(--a))) calc(100% - 1.6em*sin(var(--a))),
        #0000 calc(100% - 1.6em*sin(var(--a)) + 1px)
      );
  }
  h1:before,
  h1:after{
    height: calc(1.6em/cos(var(--a)));
    width: calc(100%*cos(var(--a)) - 1.6em*sin(var(--a))) ;
  }
}


body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  grid-auto-flow: column;
  gap: 50px;
}

h1 {
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 2.5rem;
}

本文轉載於:

https://juejin.cn/post/7288178532861345832

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 巧用指標平臺DataIndex，五步法輕鬆實現指標管理
    開發部門在做指標加工的全流程中，是否經常出現如下問題： · 業務部門看指標數據的時候，看到兩個名稱相似的指標，不清楚兩個指標的差異性，來咨詢開發部門指標計算口徑，開發部門配合業務部門翻找代碼，找出指標口徑差異性，影響工作效率 · 業務部門看指標數據的時候，總會出現不同頁面的同一指標統計的結果不一致的 ...
  • 定位SQL慢查詢
    一、概念 MySQL的慢查詢（慢查詢日誌）：是MySQL提供的一種日誌記錄，用來記錄在MySQL中響應時間超過閾值的語句。 具體環境中，運行時間超過long_query_time值的SQL語句，則會被記錄到慢查詢日誌中。long_query_time的預設值為10，意思是記錄運行10秒以上的語句。 ...
  • MySQL高級
    前言： 本篇文章是本人學習MySQL高級的筆記。 資料：《MySQL是怎樣運行的》、《小林Coding-圖解MySQL》、《MySQL45講》、《尚矽谷康師傅MySQL視頻》 一、基礎篇 1. 什麼是關係型資料庫？ 關係型資料庫是指採用了關係模型來組織數據的資料庫，其以行和列的形式存儲數據，一系列的 ...
  • MySQL的最左原則
    一、簡述 MySQL索引的最左原則指的是，當使用多列索引時，MySQL會優先使用索引中最左邊的列。如果查詢條件中包含了索引的最左列，那麼MySQL會使用這個索引來加速查詢。 更具體的描述：建立一個索引，對於索引中的欄位，mysql會一直向右匹配直到遇到範圍查詢(>、<、between、like)就停 ...
  • 快速提升NineData實戰能力：新手任務詳解
    NineData控制台的新手任務旨在幫助新用戶熟悉和掌握其各項功能，包括數據源創建、SQL開發、分鐘級數據恢復、不停機數據遷移和企業協同開發等。通過任務引導和實踐，可以顯著降低使用門檻，提升使用效率，保證數據安全。對於新用戶，玖章算術提供了完整的NineData新手任務實戰指南，覆蓋四大模塊的基礎操... ...
  • 一些問題記錄和快捷按鈕
    JS一些問題記錄 1.switch，break後只會退出switch本身用於防止穿透，外層比如for不會退出，ifbreak的話就會退出整個迴圈 2.三元運算符用於比較簡單的兩個東西之間的比較，也不能輸出列印出來，但是if雙分支就可以 3.同一個頁面兩個for，都用i不會衝突，是兩個局部變數不會影響 ...
  • vue項目打包，解決靜態資源無法載入和路由載入無效(404)問題
    打包後的項目靜態資源無法使用，導致頁面空白 靜態資源無法使用，那就說明項目打包後，圖片和其他靜態資源文件相對路徑不對，此時找到config裡面的index.js，在build模塊下加入assetsPublicPath: './', 如下圖所示， 在History模式下配合使用nginx運行打包後的項 ...
  • 解決浮動帶來影響的方法
    # 浮動會帶來的影響 —— 會造成父標簽塌陷的問題 解決辦法： 方法一：自己加一個div，設置高度 方法二：利用clear屬性 #d1{ clear: left; /*該標簽的左邊(地面和空中)都不能有浮動的元素*/ } 方法三：使用通用方法 在寫HTML代碼前，先提前寫好處理浮動帶來的影響的css ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類