App下載

CSS如何繪制三角形？附源碼！

猿友 2021-05-10 18:04:08 瀏覽數(shù) (3723)
反饋

往期文章中，我們介紹了 CSS 繪制幾種常見(jiàn)圖形的方法，那么今天我們來(lái)學(xué)習(xí)下 CSS 如何繪制三角形？附源碼學(xué)習(xí)。

往期相關(guān)文章：

《CSS如何繪制一個(gè)半圓》、《幾種基本圖形的CSS畫(huà)法》、《CSS如何繪制心形》

CSS 如何繪制三角形？

向上的三角形

CSS繪制向上的三角形

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

向上的三角形

CSS繪制向下的三角形

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

向左的三角形

CSS繪制向左的三角形

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

向右的三角形

CSS繪制向右的三角形

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

左上三角形

CSS繪制左上的三角形

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

右上三角形

CSS繪制右上的三角形

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

左下三角形

CSS繪制左下的三角形

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

右下三角形

CSS繪制右下的三角形

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

以上就是文章“CSS 如何繪制三角形？附源碼！”的全部?jī)?nèi)容。更多 CSS 繪制圖形請(qǐng)關(guān)注 w3cschool 官網(wǎng)。

CSS

0 人點(diǎn)贊