国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

如何用css畫三角形

Yuqi / 2206人閱讀

摘要：那問題來了，如何用來畫三角形呢別著急，先來看看我所遇到過的三角形。如下圖，有實(shí)心三角形，空心的，還有可以歸為三角形的小箭頭。畫一個三角形，首先想到的是如何畫三角形的形狀，然后給一個背景顏色。

在設(shè)計(jì)稿中，經(jīng)常會出現(xiàn)好多三角形，如果將三角形變成圖片，通過img標(biāo)簽的src或者background中的url來訪問，從前端性能方面來看這并不好。那問題來了，如何用css來畫三角形呢？別著急，先來看看我所遇到過的三角形。如下圖，有實(shí)心三角形，空心的，還有可以歸為三角形的小箭頭。

先來說說實(shí)心的三角形。

畫一個三角形，首先想到的是如何畫三角形的形狀，然后給一個背景顏色。但是在寫div時，會發(fā)現(xiàn)，div是的邊框是直線。那么，我想到，要是給div的高和寬設(shè)置為0，然后設(shè)置四個border不同的顏色，那么這個顏色會重疊覆蓋么？ps：當(dāng)然會想到設(shè)置padding或者margin值，但是這兩種屬性無法設(shè)置顏色。

#triangle02{
    width: 0;
    height: 0;
    border-top: 50px solid blue;
    border-right: 50px solid red;
    border-bottom: 50px solid green;
    border-left: 50px solid yellow;
    }

因?yàn)槲覀冎幌胍粋€三角形，如果把其他三個三角形的顏色變白，那就只剩下一個，等等，如果背景顏色不是白色呢？css中有這樣一個屬性，transparent，背景透明。這樣便可以達(dá)到我們的目的了。

#triangle03{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top: 50px solid blue;
    }
#triangle04{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-right: 50px solid red;
    }
#triangle05{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 50px solid green;
    }
#triangle06{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-left: 50px solid yellow;
    }

上面的代碼就可以實(shí)現(xiàn)，四個不同方向的三角形了。

設(shè)計(jì)稿中可能還會出現(xiàn)高和底長度有限制的三角形，這里以第三個綠色三角形為例?？瓷厦娴拇a，我們可以發(fā)現(xiàn)，三角形的底為border的兩倍，border-bottom為三角形的高。來看下面這組三角形：

#my01{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 50px solid green;
    }
#my02{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 80px solid green;
    }
#my03{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 100px solid green;
    }
#my04{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 150px solid green;
    }

#my11{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 100px solid green;
    }
#my12{
    width: 0;
    height: 0;
    border: 70px solid transparent;
    border-bottom: 100px solid green;
    }
#my13{
    width: 0;
    height: 0;
    border: 90px solid transparent;
    border-bottom: 100px solid green;
    }
#my14{
    width: 0;
    height: 0;
    border: 110px solid transparent;
    border-bottom: 100px solid green;
    }

夠詳細(xì)吧~

那個小箭頭的三角形，主要運(yùn)用了css3的transform中的rotate()，我們后續(xù)再介紹吧！

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

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

相關(guān)文章

  • 前端每日實(shí)戰(zhàn)：155# 視頻演示如何用純 CSS 創(chuàng)作一只熱氣球

    摘要：效果預(yù)覽按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。源代碼下載每日前端實(shí)戰(zhàn)系列的全部源代碼請從下載代碼解讀定義，容器中有個子元素，代表傘蓋，代表吊籃居中顯示定義容器的尺寸，子元素和縱向居中布局先畫傘蓋。 showImg(https://segmentfault.com/img/bVbh6vq?w=400&h=300); 效果預(yù)覽 按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁面...

    2bdenny 評論0 收藏0

  • 前端每日實(shí)戰(zhàn)：155# 視頻演示如何用純 CSS 創(chuàng)作一只熱氣球

    摘要：效果預(yù)覽按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。源代碼下載每日前端實(shí)戰(zhàn)系列的全部源代碼請從下載代碼解讀定義，容器中有個子元素，代表傘蓋，代表吊籃居中顯示定義容器的尺寸，子元素和縱向居中布局先畫傘蓋。 showImg(https://segmentfault.com/img/bVbh6vq?w=400&h=300); 效果預(yù)覽 按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁面...

    KavenFan 評論0 收藏0

  • 前端每日實(shí)戰(zhàn) 2018 年 5 月份項(xiàng)目匯總（共 30 個項(xiàng)目）

    摘要：過往項(xiàng)目年月份項(xiàng)目匯總共個項(xiàng)目年月份發(fā)布的項(xiàng)目前端每日實(shí)戰(zhàn)專欄每天分解一個前端項(xiàng)目，用視頻記錄編碼過程，再配合詳細(xì)的代碼解讀，是學(xué)習(xí)前端開發(fā)的活的參考書頻演示如何用純創(chuàng)作一種按鈕被瞄準(zhǔn)的交互特效視頻演示如何用純創(chuàng)作一個同心圓弧旋轉(zhuǎn)特效視頻演 過往項(xiàng)目 2018 年 4 月份項(xiàng)目匯總（共 8 個項(xiàng)目） 2018 年 5 月份發(fā)布的項(xiàng)目 《前端每日實(shí)戰(zhàn)》專欄每天分解一個前端項(xiàng)目，用視頻記錄...

    array_huang 評論0 收藏0

發(fā)表評論

0條評論

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