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

Czy w CSS3 jest możliwość zrobienia wcięć lub daszków w bloku?
ME
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 22
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.

dzek69
  • Rejestracja: dni
  • Ostatnio: dni
  • Lokalizacja: Rzeszów
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

Koziołek
  • Rejestracja: dni
  • Ostatnio: dni
  • Lokalizacja: Stacktrace
  • Postów: 6823
1

Jak masz css3 to masz i klauzulę content:before/after.
Bierzemy tworzymy pusty div i w nim:

Kopiuj
.triagle{
     background-color: orange;
}
.triagle:after{
   content:"▼"
   color: white;
   //pozycjonowanie
}

Pisane na pałę więc pewno nie zaskoczy od razu, ale tą metodą.

Markness
  • Rejestracja: dni
  • Ostatnio: dni
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..

ME
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 22
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.

hauleth
  • Rejestracja: dni
  • Ostatnio: dni
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.

ME
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 22
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.

dzek69
  • Rejestracja: dni
  • Ostatnio: dni
  • Lokalizacja: Rzeszów
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

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.