WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Ein Code von ytr3d3
1093
ytr3d3
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
22 August 2025
CSS-Codeausschnitt für Herzanimation
28 May 2025
Ein Code von alejandrob.f2012
5 December 2025
HTML-Telefonnummern-Eingabeformular mit Plus-Schaltfläche
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) */