układ strony dwukolorowy - pochylona granica

Question

Czołem, nastepujące pytanie: chcę by tło strony było dwukolorowe. po prawej np. czerwony a po lewej zielony. z tym, ze nie chcę by granica przebiegała dokładnie z osią Y a była trochę pochylona w którąś stronę. Jak najlepiej ostylować taki pomysł?

dzięki,

pozdro! : )

Comments

Kombinuj z :after i borderem :)

Answer 1

Jak najlepiej? Jak najszybciej, ale ze mnie śmieszek :)

linear-gradinet dla body

body {
  background: linear-gradient(to bottom right, blue 50%, red 50.2%);
}

Dla drugiego koloru można dać 50% zamiast 50.2%, ale to zapewnia "antyaliasing", no prawie. Technicznie to nie jest antyaliasing, ale dla ułatwienia można wykorzystać taki triczek :)

Comments

dzięki wielkie, robiłem już coś takiego keidyś, zapomniałem. : )

---

a jednak dupa. to nie to.

---

Co nie działa, kolego?

---

Linear-gradient dodaje płynne przejście a jak chcę nagłą zmianę koloru - choć bez widocznego bordera.

---

Dodałeś 50% i 50.2%/50% dla kolorków, prawda? To właśnie zapewnia tą nagłą zmianę.
No i jeżeli dobrze pamiętam to dla linear-gradient potrzebny jest prefix dla webkit, ale to sobie już sprawdź [caniuse] :)

---

Wzorując się na pomyśle Ivana stworzyłem coś takiego. Jest OK?

---

ok, zwracam honor, faktycznie działa! : ) dzięki!