成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

CSS 實(shí)現(xiàn)三角形，非 Hack

LinkedME2016 / 2005人閱讀

摘要：寫(xiě)過(guò)向上箭頭，對(duì)話氣泡或其他類(lèi)似的尖角元素的人都知道，為了創(chuàng)建一個(gè)純實(shí)現(xiàn)的三角形，必須使用某些。最流行的兩種方式是通過(guò)邊框?qū)崿F(xiàn)，或字符。例如，我們無(wú)法在三角形上使用背景圖片，因?yàn)檫吙蚝妥址荒苁褂妙伾?。為了?shí)現(xiàn)三角形，我們需要使用函數(shù)。

寫(xiě)過(guò) HTML upvote arrow（向上箭頭），speech bubble（對(duì)話氣泡）或其他類(lèi)似的尖角元素的人都知道，為了創(chuàng)建一個(gè)純 CSS 實(shí)現(xiàn)的三角形，必須使用某些 Hack。最流行的兩種方式是通過(guò) 邊框?qū)崿F(xiàn)，或 Unicode 字符。

不得不說(shuō)，這些 CSS Hack 都非常聰明，但它們卻算不上好的解決方案，代碼不優(yōu)雅且不夠靈活。例如，我們無(wú)法在三角形上使用背景圖片，因?yàn)檫吙蚝妥址荒苁褂妙伾?/p>

譯注： speech bubble（對(duì)話氣泡）如下圖：

使用 Clip-path

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

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

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

為了實(shí)現(xiàn)三角形，我們需要使用 polygon() 函數(shù)。其參數(shù)為以逗號(hào)分隔的平面坐標(biāo)點(diǎn)，這些坐標(biāo)點(diǎn)定義了我們的剪切遮罩的形狀。三角形 = 3個(gè)點(diǎn)?？梢栽囍闹挡⒉榭葱螤钍侨绾巫兓?。

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

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

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

這種方法唯一的缺點(diǎn)就是是我們需要自行計(jì)算點(diǎn)的坐標(biāo)來(lái)得到一個(gè)好看的三角形。

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

瀏覽器支持

如果你查看 clip-path 的 caniuse 頁(yè)面，一開(kāi)始你發(fā)現(xiàn)貌似兼容性非常不好，但事實(shí)上，該屬性在 Chrome 中能正常工作，且不需要前綴，在 Safari 中需要加 -webkit- 前綴。Firefox 53 版本以上可用。IE / Edge 一貫的不支持，未來(lái)也許會(huì)支持。

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

MDN 上的 clip-path - 鏈接

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

Clippy, 一個(gè) clip-path 生成器 - 鏈接

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/114458.html

相關(guān)文章

  • 用 CSS 實(shí)現(xiàn)三角形與平行四邊形

    摘要：所以我們需要加一個(gè)內(nèi)層元素，并對(duì)內(nèi)層元素做一次逆向的歪曲，從而得到我們想要的效果實(shí)現(xiàn)代碼如下，另附示例上?？偨Y(jié)第一種方法使用屬性出三角形，并通過(guò)對(duì)三個(gè)元素進(jìn)行拼接最終實(shí)現(xiàn)了平行四邊形而第二種方法則通過(guò)來(lái)得到平行四邊形。 本文最初發(fā)布于我的個(gè)人博客：咀嚼之味 最近在逛某個(gè)技術(shù)網(wǎng)站的時(shí)候，感覺(jué)文章關(guān)鍵詞上的樣式好酷炫啊。于是我將那種寫(xiě)法照搬到了我的博客中，也許最近逛過(guò)我博客的小伙伴已經(jīng)發(fā)現(xiàn)...

    Martin91 評(píng)論0 收藏0

  • 使用css實(shí)現(xiàn)全兼容的三角形

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

    zzbo 評(píng)論0 收藏0

  • CSS學(xué)習(xí)筆記

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

    bawn 評(píng)論0 收藏0

  • 面試BAT，你憑什么說(shuō)你掌握了CSS

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

    darryrzhong 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<