css实现三角形

最新推荐文章于 2025-06-21 09:15:59 发布

原创最新推荐文章于 2025-06-21 09:15:59 发布 · 224 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端面试题

本文详细介绍了如何使用CSS创建各种方向的三角形，包括单个方向和组合方向。通过调整不同边的border宽度并隐藏不需要的颜色，可以实现上、下、左、右以及四个角落的三角形效果。

1、原理

原理是利用设置 border 的颜色，通过设置各个方向的boder宽度来控制三角形，然后隐藏其他边的颜色。

2、准备

    div {
    /*背景色方便对比显示*/
    background: #999999;
    /*必要条件*/
    box-sizing: border-box;
    /*宽高根据实际需要设置*/
    width: 100px;
    height: 100px;
    /*方便布局*/
    margin-bottom: 32px;
}

3、设置border

    .border {
        border-top: 20px solid red;
        border-bottom: 20px solid green;
        border-left: 50px solid blue;
        border-right: 50px solid yellow;
    }

4、单个方向形成三角形

4.1、上

    .border-top {
        border-top: 50px solid red;
        border-bottom: 50px solid transparent;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
    }

4.2、下

    .border-bottom {
        border-top: 50px solid transparent;
        border-bottom: 50px solid green;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
    }

4.3、左

    .border-left {
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
        border-left: 50px solid blue;
        border-right: 50px solid transparent;
    }

4.4、右

    .border-right {
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
        border-left: 50px solid transparent;
        border-right: 50px solid yellow;
    }

5、组合方向形成三角形

5.1、左上

    .border-left-top {
        border-top: 50px solid red;
        border-bottom: 50px solid transparent;
        border-left: 50px solid blue;
        border-right: 50px solid transparent;
    }

5.2、左下

    .border-left-bottom {
        border-top: 50px solid transparent;
        border-bottom: 50px solid green;
        border-left: 50px solid blue;
        border-right: 50px solid transparent;
    }

5.3、右上

    .border-right-top {
        border-top: 50px solid red;
        border-bottom: 50px solid transparent;
        border-left: 50px solid transparent;
        border-right: 50px solid yellow;
    }

5.4、右下

    .border-right-bottom {
        border-top: 50px solid transparent;
        border-bottom: 50px solid green;
        border-left: 50px solid transparent;
        border-right: 50px solid yellow;
    }

代码链接

标签

#css #border #三角形