css三角形繪制方法總結(jié)

rickchen 發(fā)布于2019-08-29 13:13 / 1581人閱讀

摘要：在做頁面重構(gòu)的時(shí)候，免不了和各種小圖標(biāo)打交道，這其中最多的應(yīng)該是三角形以及箭頭，一般情況下可以通過偽類使用解決大部分問題。

在做UI（頁面重構(gòu)）的時(shí)候，免不了和各種小圖標(biāo)打交道，這其中最多的應(yīng)該是三角形以及箭頭，一般情況下可以通過偽類使用unicode解決大部分問題。

現(xiàn)在我們來總結(jié)下幾種使用css繪制三角形的方法，dom結(jié)構(gòu)如下：

最簡單最方便的辦法 background

代碼忽略

unicode

.triangle:after{
    display:block;
    content:"25B2";
    color:"#fd5353";
    font-size:20px;
}

注意，偽類必須加上content屬性，否則不生效

unicode圖表

border

.triangle{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

使用border繪制三角形是什么原理？事實(shí)上，寬度相等的border是以45度對(duì)接的，如下圖：

那么沒有了上border就是如下圖：

再設(shè)置div的寬度為0，就是如下圖：

再設(shè)置div的高度為0，如下圖：

最后設(shè)置左右border的顏色為透明，如下圖：

再來個(gè)動(dòng)圖：

通過這種原理，我們可以做更多的圖形，比如五角星、六角星等，更多圖形請(qǐng)移步shapesofcss

使用css3 transform rotate

.triangle {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
    
    //劃重點(diǎn)
    overflow:hidden;
}

.triangle: before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0079C6;
    
    //劃重點(diǎn)
    transform-origin: 0 100%;        
    transform: rotate(45deg);
}

為什么是1.41，因?yàn)檎叫蔚膶?duì)角線長度是約等于1.414。

使用clip-path

.triangle{
    width:200px;
    height:200px;
    background:#fd5353;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

clip-path不支持安卓4.4以下，其余均需使用瀏覽器前綴-webkit，caniuse

詳細(xì)請(qǐng)移步 clip-path

原文

云服務(wù)器 GPU云服務(wù)器三角形繪制 html5三角形繪制 css三角形 css三角

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

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

相關(guān)文章

用CSS繪制三角形

摘要：代碼如下代碼代碼效果如下繪制此時(shí)，我們就可以根據(jù)上述的內(nèi)容畫出不同朝向的三角形了，例如當(dāng)我們需要一個(gè)朝上的三角形，就不需要設(shè)置上邊框，其他的以此類推。引入用 CSS 繪制三角形，只是對(duì) border 屬性的簡單應(yīng)用。平時(shí)使用 border 屬性的時(shí)候多留意一下，就會(huì)發(fā)現(xiàn)其中的技巧。下面，我們先看以下代碼： HTML代碼： ---------- CSS代碼： .test{ ...

hover_lew 2019-08-28 18:11 評(píng)論0 收藏0
CSS 繪制各種形狀

摘要：說明使用可以繪制出許多形狀，比如三角形梯形圓形橢圓，等并不只是可以繪制矩形。前面后面左面右面下面查看示例總結(jié)文中實(shí)現(xiàn)的各種形狀，也許你覺得實(shí)現(xiàn)的很復(fù)雜，其實(shí)你也可以使用這一個(gè)屬性，繪制各種形狀。說明使用 CSS 可以繪制出許多形狀，比如三角形、梯形、圓形、橢圓，等并不只是可以繪制矩形。下面來看看怎么實(shí)現(xiàn)這些形狀的吧。為了容易理解，文章分為基本形狀和組合形狀來說，基本形狀是比較...

3fuyu 2019-08-02 16:09 評(píng)論0 收藏0
CSS 繪制各種形狀

摘要：說明使用可以繪制出許多形狀，比如三角形梯形圓形橢圓，等并不只是可以繪制矩形。前面后面左面右面下面查看示例總結(jié)文中實(shí)現(xiàn)的各種形狀，也許你覺得實(shí)現(xiàn)的很復(fù)雜，其實(shí)你也可以使用這一個(gè)屬性，繪制各種形狀。說明使用 CSS 可以繪制出許多形狀，比如三角形、梯形、圓形、橢圓，等并不只是可以繪制矩形。下面來看看怎么實(shí)現(xiàn)這些形狀的吧。為了容易理解，文章分為基本形狀和組合形狀來說，基本形狀是比較...

geekzhou 2019-08-30 15:43 評(píng)論0 收藏0
用 CSS 實(shí)現(xiàn)三角形與平行四邊形

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

Martin91 2019-08-28 18:14 評(píng)論0 收藏0
【基礎(chǔ)】在CSS中繪制三角形及相關(guān)應(yīng)用

摘要：基本原理在中，我們可以利用四個(gè)屬性來繪制三角形。繪制三角形等邊三角形等邊三角形又稱正三邊形，為三邊相等的三角形，其三個(gè)內(nèi)角相等，均為，它是銳角三角形的一種。簡言本文簡要闡述了用CSS邊框的方法在頁面上繪制三角形，包括幾種典型的三角形繪制，還介紹了幾個(gè)簡單的應(yīng)用場(chǎng)景。利用邊框繪制三角形方法只是眾多方案中的一種，大家根據(jù)項(xiàng)目實(shí)際，選用最適宜項(xiàng)目的方案。 showImg(https://...

Lycheeee 2019-08-30 15:53 評(píng)論0 收藏0