往期文章中，我们介绍了 CSS 绘制几种常见图形的方法，那么今天我们来学习下 CSS 如何绘制三角形？附源码学习。

往期相关文章：

《CSS如何绘制一个半圆》、《几种基本图形的CSS画法》、《CSS如何绘制心形》

CSS 如何绘制三角形？

向上的三角形

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

向上的三角形

#triangle-up{
    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;
}

以上就是文章“CSS 如何绘制三角形？附源码！”的全部内容。更多 CSS 绘制图形请关注 w3cschool 官网。