成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS 三角形繪制方法

siberiawolf / 2155人閱讀

摘要：代碼如下代碼如下代碼如下代碼如下代碼如下代碼如下代碼如下代碼如下

代碼如下:

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

代碼如下:

#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}

代碼如下:

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

代碼如下:

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

代碼如下:

#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}

代碼如下:

#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent; 
}

代碼如下:

#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}

代碼如下:

#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115212.html

相關(guān)文章

  • 【基礎(chǔ)】在CSS中繪制三角形及相關(guān)應(yīng)用

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

    Lycheeee 評論0 收藏0

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

    摘要：在做頁面重構(gòu)的時候，免不了和各種小圖標打交道，這其中最多的應(yīng)該是三角形以及箭頭，一般情況下可以通過偽類使用解決大部分問題。 在做UI（頁面重構(gòu)）的時候，免不了和各種小圖標打交道，這其中最多的應(yīng)該是三角形以及箭頭，一般情況下可以通過偽類使用unicode解決大部分問題。 現(xiàn)在我們來總結(jié)下幾種使用css繪制三角形的方法，dom結(jié)構(gòu)如下： 最簡單最方便的辦法 background 代碼忽略...

    rickchen 評論0 收藏0

  • 運用clip-path的純CSS形狀變換

    摘要：在之前所提到繪制正多邊形的方法，算是純粹利用偽元素來完成，不過坦白說還有另外一種方法，可以將單一做更多形狀的變換，這種方法就是的，這個看起來有點眼熟，因為它原本就存在于里頭，利用掩碼剪裁的方法，連接坐標繪制掩碼區(qū)域，就可以做出許多不同的 在之前所提到繪制正多邊形的方法，算是純粹利用偽元素來完成，不過坦白說還有另外一種方法，可以將單一div做更多形狀的變換，這種方法就是CSS3的clip...

    wanglu1209 評論0 收藏0

  • 用CSS繪制三角形

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

    hover_lew 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<