簡(jiǎn)言

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

十多年的牡丹江網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。全網(wǎng)營(yíng)銷(xiāo)推廣的優(yōu)勢(shì)是能夠根據(jù)用戶(hù)設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整牡丹江建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)從事“牡丹江網(wǎng)站設(shè)計(jì)”,“牡丹江網(wǎng)站推廣”以來(lái)，每個(gè)客戶(hù)項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

1 基本原理

在CSS中，我們可以利用border-top、border-left、border-bottom、border-left四個(gè)屬性來(lái)繪制三角形。實(shí)現(xiàn)的基本原理參見(jià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 等邊三角形

等邊三角形（又稱(chēng)正三邊形），為三邊相等的三角形，其三個(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)了指向作用。類(lèi)似于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方案。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

分享文章：【基礎(chǔ)】在css中繪制三角形及相關(guān)應(yīng)用-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)URL：http://weahome.cn/article/dspgoe.html