WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Um código por ytr3d3
1092
ytr3d3
Abrir no Editor
Publique Seu Código
Recomendado
25 February 2025
Um código por securearray494
22 March 2025
Um código por carab5256
7 December 2024
Um código por efficientlogic648
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) */