Um código por ytr3d3

Abrir no Editor Publique Seu Código

Recomendado

17 April 2025

.gallery {
  --z: 32px;  /* control the zig-zag  */
  --s: 360px; /* control the size */
  --g: 8px;   /* control the gap */
  
  display: grid;
  gap: var(--g);
  width: calc(2*var(--s) + var(--g));
  grid-auto-flow: column;
}
.gallery > img {
  width: 0;
  min-width: calc(100% + var(--z)/2);
  height: var(--s);
  object-fit: cover;
  -webkit-mask: var(--mask);
          mask: var(--mask);
  cursor: pointer;
  transition: .5s;
}
.gallery > img:hover {
  width: calc(var(--s)/2);
}
.gallery > img:first-child {
  place-self: start;
  clip-path: polygon(calc(2*var(--z)) 0,100% 0,100% 100%,0 100%);
  --mask: 
    conic-gradient(from -135deg at right,#0000,#000 1deg 89deg,#0000 90deg) 
      50%/100% calc(2*var(--z)) repeat-y;
}
.gallery > img:last-child {
  place-self: end;
  clip-path: polygon(0 0,100% 0,calc(100% - 2*var(--z)) 100%,0 100%);
  --mask: 
    conic-gradient(from   45deg at left ,#0000,#000 1deg 89deg,#0000 90deg) 
      50% calc(50% - var(--z))/100% calc(2*var(--z)) repeat-y;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: #333333;
}
h1 {
  text-align: center;
  font-family: system-ui, sans-serif;
  font-size: 3rem;
  word-spacing: .8em;
}
h1 span:first-child {
  color: #af3817;
}
h1 span:last-child {
  color: #0b3fa1;
}

Um código por ytr3d3

Recomendado

Um código de Metehan

Um código de Mete

Um código por nasmacadic

HTML

CSS

JS

Recomendado

Um código de Metehan

Um código de Mete

Um código por nasmacadic

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS