Ein Code von ytr3d3

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

4 June 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;
}

Ein Code von ytr3d3

Empfohlen

Ein Code von chinoos

Ein Code von anhtuanle2004yst

Ein Code von staticcloud996

HTML

CSS

JS

Empfohlen

Ein Code von chinoos

Ein Code von anhtuanle2004yst

Ein Code von staticcloud996

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS