h5-偽元素-before和after

做一個門票或者郵票：效果圖

 

1.html就是兩個div

 

2.具體css代碼

    <style>
        /*左側長方體基本樣式*/
        div:nth-of-type(1){
            width: 300px;
            height: 200px;
            background-color: red;
            float: left;
        }
        /*右側長方體基本樣式*/
        div:nth-of-type(2){
            width: 100px;
            height: 200px;
            background-color: blue;
            float: left;
            position: relative;
        }
        /*第一個偽元素：before是遮蓋上邊緣的圓形，當然也可以是別的形狀*/
        div:nth-of-type(2)::before{
            /*必須添加content屬性，否則后期看不到*/
            content: "";
            /*默認是行級元素，如果想設置寬高，必須轉換成塊級元素*/
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: #fff;
            border-radius: 10px;
            left: -10px;
            top: -10px;
        }
        /*第一個偽元素：after是遮蓋下邊緣的圓形，同上也可以是別的形狀*/
        div:nth-of-type(2)::after{
            /*必須添加content屬性，否則后期看不到*/
            content: "";
            /*默認是行級元素，如果想設置寬高，必須轉換成塊級元素*/
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: #fff;
            border-radius: 10px;
            left: -10px;
            bottom: -10px;
        }
    </style>