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>