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>