记一次前端css样式的三角形的应用

<section>
                <div></div>
                <div></div>
        </section>
        
        <style>
          div{
                position:relative;
                width:200px;
                height:50px;
                background:red;
                float:left;
                margin-left:10px;
            }
            div::before{
                content:"";
                display:block;
                position:absolute;
                top:0;
                left:0px;
                width:0px;
                height:0px;
                border-top:25px solid transparent;
                border-bottom:25px solid transparent;
                border-left:25px solid #fff;
                z-index:1;
            }
            div::after{
                content:"";
                display:block;
                position:absolute;
                top:0;
                right:-25px;
                width:0px;
                height:0px;
                border-top:25px solid transparent;
                border-bottom:25px solid transparent;
                border-left:25px solid red;
                z-index:2;
            }
        </style>