1. 程式人生 > >記一次前端css樣式的三角形的應用

記一次前端css樣式的三角形的應用

content 面試 posit htm relative abs .com css border

1)面試題是這樣的要求用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>

  

記一次前端css樣式的三角形的應用