CSS画三角形

这是我参与2022首次更文挑战的第20天，活动详情查看：2022首次更文挑战

有关用CSS画三角形的问题, 其实这里是用到了css盒模型的概念

由盒模型可知, 一个盒子由 margin + border + padding + content 组成
而交界处会以平滑的斜线构成, 因此由这个原理就可以用盒模型组成三角形和梯形等结构.
因为padding、margin是内外边距, 只能产生间隙, 图形就只能通过border和content来构成.
从四条边框均存在的情况下开始:

1. 正方形 + content存在

    background: brown;
    border-color: #d73131 #ffb41d #cdff70 #a4eaff;
    border-width: 10px;
    border-style: solid;

2. 梯形 - 留任意一个边框,其他部分设为透明就成想要的梯形了.

3. 七巧板 - content不存在, 宽高设为0

    width: 0px;
    height: 0px;
    border-color: #d73131 #ffb41d #cdff70 #a4eaff;
    border-width: 30px;
    border-style: solid;

同理, 只要隐藏剩下3个就可以实现三角形了.
但其实根据盒模型画的第一张图可以知道, 不需要把四个border都写出来,直角三角形只需要两个,等腰三角形写3个就可以了

3. 侧面三角形

    width: 0px;
    height: 0px;
    background: brown;
    border-top: 30px solid #eee;
    border-left: 30px solid #4c1212;
    border-right: 30px solid #eee;
    border-bottom: 30px solid #eee;

2. 对角线的三角形

    width: 0px;
    height: 0px;
    border-top: 30px solid #eee;
    border-right: 30px solid #f59c28;

3. 等腰三角形

        width: 0px;
        height: 0px;
        background: brown;
        border-top: 30px solid #eee;
        border-left: 30px solid #4c1212;
        border-right: 30px solid;

4. 然后发现可以组合成很多好玩的图形:

        width: 0px;
        height: 0px;
        border-top: 30px solid #eee;
        border-left: 15px solid #eee;
        border-bottom: 15px solid;
        border-right: 15px solid;

        width: 0px;
        height: 0px;
        border-top: 30px solid #eee;
        border-left: 15px solid #eee;
        border-bottom: 15px solid;