SOURCE

<style>
        .box{
            width: 50px;
            height: 50px;
            /* background-color:yellow; */
            border: 30px solid;
            border-color: orange #000 red green;
        }
        .box1{
            width: 0;
            height: 0;
            border-width:0 40px 40px;
            border-color:transparent transparent red;
        }

        .box2{
            position:relative;
            width: 0;
            height: 0;
            border-width: 0 40px 40px;
            border-style: solid;
            border-color: transparent transparent blue;
        }
        .box2::after {
            content: "";
            width: 0;
            height: 0;
            position: absolute;
            top: 1px;
            left: -38px;
            border-width: 0 38px 38px;
            border-style: solid;
            border-color: transparent transparent yellow;
        }

        .box3:after {
            content: "";
            position: absolute;
            top: 2px;
            left: -38px;
            border-width: 0 38px 38px;
            border-style: solid;
            border-color: transparent transparent #fff;
        }

        .box4{
            width:0;
            height:0;
            border-width: 40px;
            border-color:transparent transparent red red;
            border-style: solid;
        }

        .triggle{
            position: relative;
            width: 0;
            height: 0;
            border-width:0 40px 40px;
            border-color:transparent transparent red;
            border-style: solid;
        }
        .triggle::after{
            content: "";
            position: absolute;
            top: 0;
            left: -38px;
            width: 0;
            height: 0;
            border-width:0 38px 38px;
            border-color:transparent transparent green;
            border-style: solid;
        }

    </style>
 <div class="box">测试</div>
    <br> 

    <!-- <div class="triggle"></div> -->


 <!-- <div class="box box1"></div> -->
    <br>
    <!-- <div class="box2"></div> -->
    <br>
    <!-- <div class="box2 box3"></div> -->
    <br>

    <!-- <div class="box4"></div>  -->