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

資訊專欄INFORMATION COLUMN

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

Lycheeee / 1817人閱讀

摘要：基本原理在中，我們可以利用四個(gè)屬性來繪制三角形。繪制三角形等邊三角形等邊三角形又稱正三邊形，為三邊相等的三角形，其三個(gè)內(nèi)角相等，均為，它是銳角三角形的一種。

簡(jiǎn)言

本文簡(jiǎn)要闡述了用CSS邊框的方法在頁面上繪制三角形，包括幾種典型的三角形繪制，還介紹了幾個(gè)簡(jiǎn)單的應(yīng)用場(chǎng)景。利用邊框繪制三角形方法只是眾多方案中的一種，大家根據(jù)項(xiàng)目實(shí)際，選用最適宜項(xiàng)目的方案。

1 基本原理

在CSS中，我們可以利用border-top、border-left、border-bottom、border-left四個(gè)屬性來繪制三角形。實(shí)現(xiàn)的基本原理參見下面的演示代碼及其運(yùn)行結(jié)果。

核心代碼： 
.box {
    width: 50px;
    height: 50px;
    border-top: 50px solid red;
    border-left:50px solid blue;
    border-right: 50px solid green;
    border-bottom: 50px solid yellow;
}
運(yùn)行結(jié)果：

演示代碼

從以上代碼及運(yùn)行結(jié)果不難想出繪制三角形的辦法，我們只要將 .box 的長(zhǎng)度和寬度都設(shè)成0，就可以得到四個(gè)等腰三角形。再將不想保留的三角形邊框顏色設(shè)置成透明色（即：border-color : transparent）就可以隱藏掉不想保留的三角形。從而完成三角形的繪制。

2 繪制三角形 2.1 等邊三角形

等邊三角形（又稱正三邊形），為三邊相等的三角形，其三個(gè)內(nèi)角相等，均為60°，它是銳角三角形的一種。等邊三角形也是最穩(wěn)定的結(jié)構(gòu)。

2.1.1 尖角向上： 
.triangle-up {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 57.735px solid transparent;
    border-right: 57.735px solid transparent;
}

演示代碼

2.1.2 尖角向下： 
.triangle-down {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 57.735px solid transparent;
    border-right: 57.735px solid transparent;
}

演示代碼

2.1.3 尖角向左： 
.triangle-left {
    width: 0;
    height: 0;
    border-right: 100px solid red;
    border-top: 57.735px solid transparent;
    border-bottom: 57.735px solid transparent;
}

演示代碼

2.1.4 尖角向右： 
.triangle-right {
    width: 0;
    height: 0;
    border-left: 100px solid red;
    border-top: 57.735px solid transparent;
    border-bottom: 57.735px solid transparent;
}

演示代碼

2.2 等腰直角三角形

等腰直角三角形是特殊的等腰三角形，它的兩底角相等，都是45°；它的兩腰長(zhǎng)度相等。

2.2.1 左上直角： 
.triangle-top-left{
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

演示代碼

2.2.2 右上直角： 
.triangle-top-right {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent;
}

演示代碼

2.2.3 左下直角： 
.triangle-bottom-left{
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}

演示代碼

2.2.4 右下直角： 
.triangle-bottom-right {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}

演示代碼

3 相關(guān)應(yīng)用 3.1 彈出框(popover)組件

彈出框(popover)或提示框(tooltip)一般都會(huì)用到三角形，三角形明確并加強(qiáng)了指向作用。類似于Bootstrap的Popover和Tooltip組件都用到了邊框三角形的實(shí)現(xiàn)方式。

演示代碼

上述演示只是實(shí)現(xiàn)了頂部彈出框，其它方向彈出框參考上述實(shí)現(xiàn)方式即可。

3.2 視頻播放按鈕

視頻播放按鈕(Play button)可以采用邊框三角形的實(shí)現(xiàn)方式。

演示代碼

三角形的應(yīng)用場(chǎng)景還有很多，比如下拉菜單(dropdown menu)中，或者是“頂”及“踩”按鈕等。

邊框?qū)崿F(xiàn)三角形只是眾多方案之一，大家可以根據(jù)項(xiàng)目實(shí)際，選擇小圖標(biāo)方案或選用SVG方案。

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

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

相關(guān)文章

  • 純 Css 繪制扇形

    摘要：顯而易見餅干為兩個(gè)削成了圓形的，我們重點(diǎn)演示果醬是怎么制作的如圖所示，大扇形由個(gè)小扇形構(gòu)成，每一小扇形占整個(gè)圓餅的，大扇形占整個(gè)圓餅的。則小扇形的圓心角為，三角形的高為，寬為。 閱讀此文需具備基本數(shù)學(xué)知識(shí)：圓心角、弧度制、三角函數(shù)。 為實(shí)現(xiàn)如下效果嘔心瀝血： showImg(https://segmentfault.com/img/remote/1460000018140398?w=2...

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

  • SegmentFault 技術(shù)周刊 Vol.35 - WebGL：打開網(wǎng)頁看大片

    摘要：在文末，我會(huì)附上一個(gè)可加載的模型方便學(xué)習(xí)中文藝術(shù)字渲染用原生可以很容易地繪制文字，但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以說是 HTML5 技術(shù)生態(tài)鏈中最為令人振奮的標(biāo)準(zhǔn)之一，它把 Web 帶入了 3D 的時(shí)代。 初識(shí) WebGL 先通過幾個(gè)使用 Web...

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

  • Canvas基礎(chǔ)

    摘要：基礎(chǔ)使用元素必須為其設(shè)置寬度和高度屬性，指定可以繪制區(qū)域的大小。繪制路徑一切形狀的原始基礎(chǔ)都是路徑。其中規(guī)定要在圖像源中取得的切片位置和切片大小表示該切片在畫布中顯示的起始位置和大小。的狀態(tài)就是當(dāng)前畫面應(yīng)用的所有樣式和變形的一個(gè)快照。 title: Canvas基礎(chǔ) date: 2016-11-09 tags: HTML5 0x00 Canvas 使用 Canvas 元素必須為...

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

  • Canvas基礎(chǔ)

    摘要：基礎(chǔ)使用元素必須為其設(shè)置寬度和高度屬性，指定可以繪制區(qū)域的大小。繪制路徑一切形狀的原始基礎(chǔ)都是路徑。其中規(guī)定要在圖像源中取得的切片位置和切片大小表示該切片在畫布中顯示的起始位置和大小。的狀態(tài)就是當(dāng)前畫面應(yīng)用的所有樣式和變形的一個(gè)快照。 title: Canvas基礎(chǔ) date: 2016-11-09 tags: HTML5 0x00 Canvas 使用 Canvas 元素必須為...

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<