Fix your images with an adhesive tape
Don't let your images fall. Stick them with some adhesive tape! A CSS-only solution using a single element.
- Durable fixation & easy to remove
- Pre-cut adhesive tape
- Environment friendly ♻️
img {
--w: 280px; /* image width */
--r: 1; /* image ratio */
/* control the tape dimension (adjust to understand) */
--l: 45px;
--s: 20px;
--_d:calc(var(--s) + var(--l));
width: var(--w);
padding: calc(var(--_d)/2);
box-sizing: border-box;
aspect-ratio: var(--r);
object-fit: cover;
--_g:calc(100% - var(--w)/2)/calc(var(--w)*(1 + 1/var(--r)) - 2*(var(--s) + var(--_d)));
background: repeating-conic-gradient(from 45deg,#0000 0 25%,#0005 0 50%) var(--_g);
mask: repeating-conic-gradient(from 45deg,#000 0 25%,#0005 0 50%) var(--_g);
clip-path: polygon(var(--l) 0,var(--_d) var(--s),calc(100% - var(--_d)) var(--s),calc(100% - var(--l)) 0,100% var(--l),calc(100% - var(--s)) var(--_d),calc(100% - var(--s)) calc(100% - var(--_d)),100% calc(100% - var(--l)),calc(100% - var(--l)) 100%,calc(100% - var(--_d)) calc(100% - var(--s)),var(--_d) calc(100% - var(--s)),var(--l) 100%,0 calc(100% - var(--l)),var(--s) calc(100% - var(--_d)),var(--s) var(--_d),0 var(--l))
}See the Pen Adhesive tape for your images by Temani Afif (@t_afif) on CodePen.
Another way still using a single element but less adhesive tape (With border-radius as a bonus).
See the Pen Adhesive tape for your images II by Temani Afif (@t_afif) on CodePen.