Jest możliwość za pomocą CSS3 zrobić takie wcięcia? Robię stronę RVB i mam kłopot z wystylizowaniem tej części projektu.
możesz zrobić kwadrat dajmy na to 20x20 koloru białego po czym go obrócić i tam umiejscowić. jeżeli potrzebujesz tylko taki trójkącik - to podobny trik, tylko jeszcze opakować to w kontener z odpowiednimi wymiarami i przyciąć overflow-em
Jak masz css3 to masz i klauzulę content:before/after.
Bierzemy tworzymy pusty div i w nim:
.triagle{
background-color: orange;
}
.triagle:after{
content:"▼"
color: white;
//pozycjonowanie
}
Pisane na pałę więc pewno nie zaskoczy od razu, ale tą metodą.
Nie prościej i na 100% cross browser zrobić małą grafikę trójkąta i zrobić z niej background image z repeat-x? Taki obrazek zajmuje kilka kb a o ile prościej..
Dziękuję za wskazówki. Były pomocne. Dolny daszek zrobiłem przez wstawienie wyciętej grafiki. To rozwiązanie się najlepiej sprawdziło. Problem jednak jest z górnym wcięciem/daszkiem. W jaki sposób można go zrobić tak aby w wcięciu było widać slider który jest pod elementem w którym jest wcięcie. Ten element jest na całą szerokość przeglądarki. Wcięcie jest w kontenerze z tekstem.
Przy statycznej stronie nie było by problemu ale chodzi o responsywną stronę. Kurcze nie mam pomysłu. Dajcie jakąś wskazówkę jak takie coś robiliście.
CSS3 - http://css-tricks.com/snippets/css/css-triangle/. Można wtedy taką strzałkę zrobić w ::before
lub ::after
i nie będzie nawet potrzebny dodatkowy element.
Nie rozwiązuje to chyba jednak problemu z tym górnym aby wcięcie było przeźroczyste (było widać kawałek zdjęcia z slidera) i można było użyć cienia na całej szerokości ekranu.
Na dole działa bo wkłada się trójkąt biały i po sprawie, z górą gorzej bo było by trzeba się wciąć w blok. Pewnie jedyną możliwością jest wstawić grafikę z wcięciem i cieniem.
tak, jedyną opcją jest grafika z wcięciem.
kiedyś w css będą maski - http://caniuse.com/css-masks - ale to przyszłość póki co