CSS 實現三角形，非 Hack

LinkedME2016 發布于2019-08-29 18:37 / 1918人閱讀

摘要：寫過向上箭頭，對話氣泡或其他類似的尖角元素的人都知道，為了創建一個純實現的三角形，必須使用某些。最流行的兩種方式是通過邊框實現，或字符。例如，我們無法在三角形上使用背景圖片，因為邊框和字符只能使用顏色。為了實現三角形，我們需要使用函數。

寫過 HTML upvote arrow（向上箭頭），speech bubble（對話氣泡）或其他類似的尖角元素的人都知道，為了創建一個純 CSS 實現的三角形，必須使用某些 Hack。最流行的兩種方式是通過邊框實現，或 Unicode 字符。

不得不說，這些 CSS Hack 都非常聰明，但它們卻算不上好的解決方案，代碼不優雅且不夠靈活。例如，我們無法在三角形上使用背景圖片，因為邊框和字符只能使用顏色。

譯注： speech bubble（對話氣泡）如下圖：

使用 Clip-path

Clip-path 是 CSS 規范中新屬性中的一個，它能讓我們只顯示元素的一部分并隱藏其余部分。其工作原理如下：

假設我們有一個普通的矩形 div 元素。你可以在下面的編輯器中單擊 Run 運行并查看渲染后的 HTML。（譯注：原文內有在線代碼編輯器，此處僅貼出代碼，可自行 copy 測試。）

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

為了實現三角形，我們需要使用 polygon() 函數。其參數為以逗號分隔的平面坐標點，這些坐標點定義了我們的剪切遮罩的形狀。三角形 = 3個點。可以試著更改值并查看形狀是如何變化的。

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

    /* 三個點分別為：中上的點，左下的點，右下的點 */
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

創建的路徑中的所有內容都會保留，而路徑外內容會被隱藏。通過這種方式，我們不僅可以制作三角形，還可以制作出各種不規則的形狀，且這些形狀可像普通的 CSS 塊一樣。（譯注：即可以正常運用 CSS 屬性在這些形狀上）

這種方法唯一的缺點就是是我們需要自行計算點的坐標來得到一個好看的三角形。

不過，它比使用邊框或▲（譯注：正三角的 Unicode 字符）更好。

瀏覽器支持

如果你查看 clip-path 的 caniuse 頁面，一開始你發現貌似兼容性非常不好，但事實上，該屬性在 Chrome 中能正常工作，且不需要前綴，在 Safari 中需要加 -webkit- 前綴。Firefox 53 版本以上可用。IE / Edge 一貫的不支持，未來也許會支持。

關于 clip-path 屬性有很多小技巧，包括 SVG 的“奇幻”用法。了解更多，請查看下面的鏈接。

MDN 上的 clip-path - 鏈接

Codrops 上的深入 clip-path 教程 - 鏈接

Clippy, 一個 clip-path 生成器 - 鏈接

云服務器 GPU云服務器 css-hack css三角形 css三角 JS輕松實現CSS設置

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114458.html

用 CSS 實現三角形與平行四邊形

摘要：所以我們需要加一個內層元素，并對內層元素做一次逆向的歪曲，從而得到我們想要的效果實現代碼如下，另附示例上海總結第一種方法使用屬性出三角形，并通過對三個元素進行拼接最終實現了平行四邊形而第二種方法則通過來得到平行四邊形。本文最初發布于我的個人博客：咀嚼之味最近在逛某個技術網站的時候，感覺文章關鍵詞上的樣式好酷炫啊。于是我將那種寫法照搬到了我的博客中，也許最近逛過我博客的小伙伴已經發現...

Martin91 2019-08-28 18:14 評論0 收藏0
使用css實現全兼容的三角形

摘要：基本原理大同小異，這里主要介紹利用當然還可以使用的旋轉技術實現，由于兼容性問題這里不涉及了。利用是一種常用而且簡單兼容的方式在當前流行的的網站上，我們經常會看到一些小三角形的下拉提示（微博頂部的下拉菜單），簡單的方式可以使用一張圖片代替，但是隨著前端技術的發展，以及開發者對于前端性能的吹毛求疵，越來越多的前端開發者開始返璞歸真，在能不使用圖片的場景中減少圖片使用，css圖標相對于圖片...

zzbo 2019-08-28 17:55 評論0 收藏0
CSS學習筆記

CSS學習筆記在學習CSS的過程中做的一些記錄，用于未來的快速回憶。 HTML常見元素和理解 head中的元素指定字符集 meta name=viewport content=...定義視圖大小與設備屏幕大小的比例，用戶是否可縮放指定基準路徑 body中的元素 a[href, target] img[src, alt] table td[colspan, rowspan] for...

bawn 2019-08-29 17:27 評論0 收藏0
面試BAT，你憑什么說你掌握了CSS

摘要：控制表單控件的禁用狀態。老不支持生成絕對定位的元素，相對于瀏覽器窗口進行定位。生成相對定位的元素，相對于其正常位置進行定位。由于浮動框不在文檔的普通流中，所以文檔的普通流的塊框表現得就像浮動框不存在一樣。介紹項目已經開源：https://github.com/nanhupatar... 歡迎PR 推薦關注我們的公眾號 showImg(https://segmentfault.co...

darryrzhong 2019-08-29 16:55 評論0 收藏0