JavaScript >> Javascript 文檔 >  >> Tags >> CSS

最後!沒有醜陋黑客的 CSS 三角形

任何嘗試製作 HTML 投票箭頭、對話氣泡或其他尖銳元素的人都知道,要創建純 CSS 三角形,您必須使用某種 hack。兩種最流行的解決方案是創建邊界外的三角形,或者使用 unicode 字符。

我們必須承認,這兩種 CSS hack 都非常聰明,但它們仍然是糟糕的解決方案,因此使我們的代碼更加醜陋和不靈活。例如,我們不能有一個帶有背景圖像的三角形,因為邊框和字符只能是一種顏色。

介紹剪輯路徑

Clip-path 是 CSS 規範的一個相當新的補充,它允許我們只顯示元素的一部分並隱藏其餘部分。以下是它的工作原理:

假設我們有一個普通的矩形 div 元素。您可以點擊運行 在下面的編輯器中查看呈現的 HTML。

div {
    width: 200px;
    height: 200px;
    background: url(https://goo.gl/BeSyyD);
}
<div></div>

要製作三角形,我們需要 polygon() 功能。它期望以逗號分隔的 2D 點作為參數,這些點將定義我們的面具的形狀。一個三角形 =3 個點。嘗試更改值以查看形狀如何變換。

div {
    width: 200px;
    height: 200px;
    background: url(https://goo.gl/BeSyyD);

    /* The points are: centered top, left bottom, right bottom */
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
<div></div>

我們創建的路徑內的所有內容都保留下來,路徑外的所有內容都隱藏了。這樣我們不僅可以製作三角形,還可以製作各種不對稱的形狀,它們的行為就像常規的 CSS 塊一樣。

這種技術的唯一缺點是我們必須仔細計算點的坐標才能得到一個好看的三角形。

不過,這比使用邊框或▲要好得多。

瀏覽器支持

如果您打開剪輯路徑的 caniuse 頁面,乍一看,事情看起來不太好,但實際上該屬性在 Chrome 中沒有前綴並且與 -webkit- 一起工作得非常好 Safari 中的前綴。 Firefox 用戶必須等到 53 版。IE/Edge 像往常一樣落後,但我們可以期待未來某個時候支持。

進一步閱讀

clip-path 屬性還有許多其他技巧,包括一些 SVG 魔法。要了解有關它的更多信息,請查看以下鏈接。

  • MDN 上的剪輯路徑 - 此處
  • Codrops 上的剪輯路徑深入教程 - 此處
  • Clippy,一個剪輯路徑生成器 - 在這裡

Tutorial JavaScript 教程
  1. Angular 面試前要知道的 7 件事

  2. 🔥 創建網絡應用程序💪

  3. 獲取沒有 DOM 元素的 css 值

  4. 以不可變的方式更新數組中的一個對象

  5. 在 React 18 中創建 modals 的兩個最佳實踐

  6. 🚜 使用 Chrome DevTools 上的 JavaScript 片段提高您的工作效率🍄

  7. React Tips — 測試、重定向和 Markdown

  1. 用大約 20 行代碼、4 個依賴項和無轉譯器構建一個反應靜態站點生成器

  2. Node.js 事件循環

  3. 2013 年 100 大 jQuery 插件(第 5/5 部分)

  4. let var const - js 中的變量

  5. 電子替代品:探索 NodeGUI 和 React NodeGUI

  6. R 閃亮 – 最後點擊的按鈕 id

  7. 從 JS 腳本中獲取一個值並將其傳遞給 HTML 表單

  1. jQuery 動畫:一個 7 步程序

  2. 如何輕鬆讓 PWA 兼容離線展示

  3. KendoReact 數據網格簡介

  4. 艱難地製作一個更好看的網站