<div></div>
<div></div>
<div></div>
<div></div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
min-height: 100vh;
display: grid;
grid-template-columns: repeat(4, 400px);
gap: 10px;
padding: 10px;
place-items: center;
}
div{
width: 400px;
height: 688px;
background: url('//www.w3cplus.com/sites/default/files/blogs/2019/1905/mask-clip-path-1.png') no-repeat;
background-size: 400px 688px;
position: relative;
}
div:nth-child(2) {
overflow: hidden;
&::after {
content: '';
width: 60px;
height: 60px;
background: rgba(0,0,0,0);
position: absolute;
top: 276px;
right: 2px;
border-radius: 100%;
box-shadow: 0 0 0 99999rem rgba(0,0,0,.65);
}
&::before {
content: 'box-shadow';
position: absolute;
left: 50%;
top: 20px;
transform: translate(-50%, 0);
color: #fff;
z-index: 2;
font-size: 2vw;
font-weight: 700;
white-space: nowrap;
text-shadow: 1px 1px 0 rgba(0,0,0,.25), -1px -1px 0 rgba(0,0,0,.25);
}
}
div:nth-child(3) {
overflow: hidden;
&::after {
content: '';
width: 60px;
height: 60px;
background: rgba(0,0,0,0);
position: absolute;
top: -222px;
right: -500px;
border-radius: 100%;
border: 500px solid rgba(0,0,0,.65);
}
&::before {
content: 'border';
position: absolute;
left: 50%;
top: 20px;
transform: translate(-50%, 0);
color: #fff;
z-index: 2;
font-size: 2vw;
font-weight: 700;
white-space: nowrap;
text-shadow: 1px 1px 0 rgba(0,0,0,.25), -1px -1px 0 rgba(0,0,0,.25);
}
}
div:nth-child(4) {
overflow: hidden;
&::after {
content: '';
background: radial-gradient(circle at 368px 308px, transparent, transparent 30px, rgba(0,0,0,.65) 30px, rgba(0,0,0,.65) 100%);
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
&::before {
content: 'radial-gradient()';
position: absolute;
left: 50%;
top: 20px;
transform: translate(-50%, 0);
color: #fff;
z-index: 2;
font-size: 2vw;
font-weight: 700;
white-space: nowrap;
text-shadow: 1px 1px 0 rgba(0,0,0,.25), -1px -1px 0 rgba(0,0,0,.25);
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.