WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Ein Code von ytr3d3
819
ytr3d3
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
26 May 2025
Ein Code von Liamgilles76
10 December 2024
Ein Code von hunganh
24 February 2025
Ein Code von securearray494
HTML
Copy
CodePen - Zig-zag border & cool hover effect
Archer
Vs
Saber
CSS
Copy
.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; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */