css三角形繪制方法總結

rickchen 發布于2019-08-29 13:13 / 1582人閱讀

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

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

現在我們來總結下幾種使用css繪制三角形的方法，dom結構如下：

最簡單最方便的辦法 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繪制三角形是什么原理？事實上，寬度相等的border是以45度對接的，如下圖：

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

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

再設置div的高度為0，如下圖：

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

再來個動圖：

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

使用css3 transform rotate

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

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

為什么是1.41，因為正方形的對角線長度是約等于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

詳細請移步 clip-path

原文

云服務器 GPU云服務器三角形繪制 html5三角形繪制 css三角形 css三角

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

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

用CSS繪制三角形

摘要：代碼如下代碼代碼效果如下繪制此時，我們就可以根據上述的內容畫出不同朝向的三角形了，例如當我們需要一個朝上的三角形，就不需要設置上邊框，其他的以此類推。引入用 CSS 繪制三角形，只是對 border 屬性的簡單應用。平時使用 border 屬性的時候多留意一下，就會發現其中的技巧。下面，我們先看以下代碼： HTML代碼： ---------- CSS代碼： .test{ ...

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

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

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

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

geekzhou 2019-08-30 15:43 評論0 收藏0
用 CSS 實現三角形與平行四邊形

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

Martin91 2019-08-28 18:14 評論0 收藏0
【基礎】在CSS中繪制三角形及相關應用

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

Lycheeee 2019-08-30 15:53 評論0 收藏0