CSS Tip

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.

images with adhesive tape

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).

images with adhesive tape

See the Pen Adhesive tape for your images II by Temani Afif (@t_afif) on CodePen.

More CSS Tips