CSS code to achieve coupon edge punch

The project used this edge punch effect, try to use the pure CSS to write this style, this article mainly to share the use of pure CSS to write an edge punch effect, the need for a friend reference, hope to help everyone.

The effect is roughly

Steps to achieve the idea of:

1, first draw two boxes with rounded corners, A and B (a, b respectively need to add a projection effect, not on the diagram)

2, in the left and right of B two gaps to draw a row of circles (in fact, the square with 50% of the fillet), the circle fill color and the background color is the same (here the background color is white, so the round fill is white)

3, to the round hole plus inner shadow, to achieve the real punch effect, here is used in this CSS:

box-shadow:0 1px 1px rgba (0,0,0,0.2) inset;

4, at this time B to the right of a row of holes due to the addition of the inner shadow of the relationship, appears to be more right half, here need to deal with the surplus parts

Then use a piece and the background color (here is white) the same block block the right side of the extra half of the hole (that is, Area C, in order to see here with a different color, adjusted to the background color is the beginning of the same)

Note: The width of a and B can be adaptive (for example, how much of the outer layer), and the height of a and B must be written dead due to the number and position of the punch.

The specific implementation code is as follows:

<! DOCTYPE html> 
Real-world results for specific code implementations: