想实现打孔,且打孔位置是透明色,需要注意以下两点
- 预留好打孔的位置
- 打孔的边框通过border-radius控制
预留打孔位置
根据需要自己去布局就好了
实现打孔
.coupon-middle:before, .coupon-middle:after {
content: '';
border: 300px solid #FFFFFF;
position: absolute;
width: 60px;
height: 60px;
border-radius: 50%;
top: 50%;
margin-top: -330px;
}
.coupon-middle:before {
left: -330px;
}
.coupon-middle:after {
right: -330px;
}
这段代码里面 border
和 border-radius
属性共同实现了打孔的效果,至于其他属性就是为了定位位置。