← Repozytorium modułów
klasa: zolty-rog
klasa: sciety-rog

Narożnik zdjęcia — 4Hand

Dwie klasy CSS na module Obraz (lub Galerii) Divi:
zolty-rog — żółty trójkąt w lewym górnym rogu
sciety-rog — ścięty (obcięty) lewy górny róg
Kąt narożnika 1:3 — spójny ze skosem przycisku btn-bok i slajdera.

Jak użyć

  1. Na module Obraz → Zaawansowane → Klasa CSS wpisz zolty-rog albo sciety-rog.
  2. Wielkość narożnika: wartości 120px / 40px (duży) lub 60px / 20px (mały) — skaluj trzymając 1:3.
  3. zolty-rog używa ::before, więc można łączyć z efektem hover, który siedzi na ::after.
  4. Przy ściętym rogu ustaw w module zaokrąglenie obramowania na 0.

Kod CSS — do skopiowania

/* =====================================================
   4HAND — MODUŁ: Narożnik zdjęcia (żółty róg / ścięty róg)
   Repozytorium: (do dodania jako strona /repozytorium-naroznik-4hand/)
   -----------------------------------------------------
   Kąt narożnika 1:3 — spójny ze skosem przycisku btn-bok
   i z narożnikiem kafla w slajderze realizacji (wersja 10).
   Wartości 120px (pion) / 40px (poziom) = DUŻY narożnik.
   Skaluj trzymając proporcję 1:3 (np. 60/20 = mniejszy).

   Użycie: klasa CSS na module Obraz Divi —
     "zolty-rog"  ALBO  "sciety-rog"  (jedna na zdjęcie).
   ===================================================== */

/* --- Wariant 1: żółty trójkąt w lewym górnym rogu --- */
.zolty-rog .et_pb_image_wrap{ position:relative; display:block; }
.zolty-rog .et_pb_image_wrap::before{
  content:""; position:absolute; top:0; left:0; z-index:2;
  width:0; height:0; border-style:solid;
  border-width:120px 40px 0 0;
  border-color:#F0C609 transparent transparent transparent;
}

/* --- Wariant 2: ścięty (obcięty) lewy górny róg --- */
.sciety-rog .et_pb_image_wrap img,
.sciety-rog img{
  clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%, 0 120px);
  -webkit-clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%, 0 120px);
}

CSS wklej do Divi → Opcje motywu → Niestandardowy CSS. Ten sam kod działa na tej stronie (moduł Kod „CSS modułu”). Drugi moduł Kod to tylko styl opisu — nie kopiuj.

← Repozytorium modułów