<section>
<div>
<h4>inset(50px)</h4>
<div class="box inset1"></div>
</div>
<div>
<h4>inset(20px 30px 40px 50px)</h4>
<div class="box inset2"></div>
</div>
<div>
<h4>inset(30px round 20px 0)</h4>
<div class="box inset3"></div>
</div>
</section>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
section {
padding: 2vw;
display: flex;
gap: 2vw;
flex-wrap: wrap;
justify-content: center;
}
section > div {
background-color: #eeeeee;
position: relative;
margin-top: 20px;
}
.box {
width: 250px;
height: 250px;
background-image: url('https://fruntend.com/storage/photos/1/sunflowers.jpg');
background-repeat: no-repeat;
}
.inset1 {
clip-path: inset(50px);
}
.inset2 {
clip-path: inset(20px 30px 40px 50px);
}
.inset3 {
clip-path: inset(30px round 20px 0);
}
h4 {
font-family: sans-serif;
text-align: center;
margin-bottom: 1vw;
position: absolute;
bottom: 100%;
left: 0;
right: 0;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.