css实现三角形

Posted 2022-11-22 好_快

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;
    

代码链接