I'm working on a project where I need to make a div that must have 3 random holes on its border to make it transparent.
The problem I am facing is that for 2 holes I am using -webkit-mask with radial gradient to create 2 transparent holes of 20px. My question is when I try to create a third hole, does anyone know how to do this?
I have attached an image with the model that I need to copy. What I want is this, make 3 holes in the div
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Create more complex masks using themask-compositeproperty:
You can combine multiple
radial-gradientto create more "holes" or effects, please refer toThis solutionI posted two days ago, aimed at creating multiple A "loophole".The next challenge will be shadows, but prefer using
filter: drop-shadowand wrapper components.box-shadowdoes not apply to-webkit-mask/mask.Here is an example of building a ticket-like element in pure CSS:
.wrapper { filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5)); width: 200px; height: 300px; } .ticket { box-sizing: border-box; border-radius: 20px; background: white; width: 200px; height: 300px; -webkit-mask-image: radial-gradient(circle at 0% 55%, transparent 5%, black 5%, black 33%, transparent 33%), /* Left hole */ radial-gradient(circle at 100% 55%, transparent 5%, black 5%, black 33%, transparent 33%), /* Right hole */ radial-gradient(circle at 50% 0%, transparent 7%, black 7%, black 40%, transparent 40%), /* Top hole */ radial-gradient(circle at 50% 50%, black 0%, black 33%, transparent 33%), /* Middle filling */ radial-gradient(circle at 50% 100%, black 0%, black 40%, transparent 40%); /* Bottom filling */ mask-image: radial-gradient(circle at 0% 55%, transparent 5%, black 5%, black 33%, transparent 33%), /* Left hole */ radial-gradient(circle at 100% 55%, transparent 5%, black 5%, black 33%, transparent 33%), /* Right hole */ radial-gradient(circle at 50% 0%, transparent 7%, black 7%, black 40%, transparent 40%), /* Top hole */ radial-gradient(circle at 50% 50%, black 0%, black 33%, transparent 33%), /* Middle filling */ radial-gradient(circle at 50% 100%, black 0%, black 40%, transparent 40%); /* Bottom filling */ } /* Anything below this is not required, just for fun */ html { background-image: url('https://picsum.photos/1280/720'); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 100%; padding: 16px; } .ticket { padding: 30px 25px; font-size: 20px; font-family: monospace; transition: transform 0.2s; } .ticket:hover { transform: scale(1.05) rotate(4deg); }