Czy w CSS3 jest możliwość zrobienia wcięć lub daszków w bloku?

0

user image

Jest możliwość za pomocą CSS3 zrobić takie wcięcia? Robię stronę RVB i mam kłopot z wystylizowaniem tej części projektu.

1

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

1

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ą.

1

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..

0

user image

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.

0

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.

0

user image

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.

0

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

1 użytkowników online, w tym zalogowanych: 0, gości: 1