• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jak zrobić trójkąt w CSS

Aruba Cloud PRO i VPS, Openstack, VMWare, MS Hyper-V
0 głosów
803 wizyt
pytanie zadane 30 maja 2018 w HTML i CSS przez BlvckFox Gaduła (4,240 p.)

Witam, wiem jak zrobić "trójkąt" w CSSie (w sensie sztuczka z borderem) ale jak osiągnąć taki efekt:

Mam dwa divy, jeden posiada background: url() i jest nim obrazek. Co mogę zrobić, żeby uzyskać efekt takiego wcięcia nie rezygnując ze zdjęcia w tle?

2 odpowiedzi

+2 głosów
odpowiedź 30 maja 2018 przez Tomek Sochacki Ekspert (229,580 p.)
Można tak: https://codepen.io/Tomek_Sochacki/pen/MXYrNO

przy użyciu clip-path.

Kwestia obsługi: https://caniuse.com/#search=clip-path

Zobacz więc czy Cię to satysfakcjonuje, jak nie to kombinuj z divami i transformacjami.
komentarz 30 maja 2018 przez BlvckFox Gaduła (4,240 p.)

clip-path znacznie lepiej spełnia swoją funkcję, szkoda tylko tej obsługi. ale za takie "nowoczesne udziwnienia" trzeba czymś zapłacić 

komentarz 30 maja 2018 przez Tomek Sochacki Ekspert (229,580 p.)
Można podejść do tego inaczej - dla nowych przeglądarek zaserwować clip-path, a na starszych po prostu będzie prostokątny div i tyle. Nie zawsze wg mnie jest sens usilnie dązyć do identycznego layoutu na wszystkich środowiskach.
komentarz 30 maja 2018 przez BlvckFox Gaduła (4,240 p.)
Co trzeba zrobić, żeby dla przeglądarek które obsługują clip-path zaserwować im to a tym starszym pokazać coś innego?
1
komentarz 30 maja 2018 przez Tomek Sochacki Ekspert (229,580 p.)
starsze po prostu zignorują tę właściwość CSS. Wejdź na mojego codepen co dałem i usuń clip-path - tak będzie to wyglądać na przeglądarce nie obsługującej tego.
+1 głos
odpowiedź 30 maja 2018 przez rafal.budzis Szeryf (82,700 p.)

Dwa białe <div> na 50% obok siebie nałożone na obarazek + transform: skew();

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew

 

Alternatywnie clip path i zabawa z SVG

komentarz 30 maja 2018 przez BlvckFox Gaduła (4,240 p.)
O faktycznie, jest to jakieś rozwiązanie - dzięki :) poczekam jeszcze może ktoś ma jakieś pomysły czy można to zrobić bez dodatkowych divów
komentarz 30 maja 2018 przez rafal.budzis Szeryf (82,700 p.)
Zamiast 2 divów można by aftera + before ;)
komentarz 30 maja 2018 przez BlvckFox Gaduła (4,240 p.)

@rafal612b,

https://codepen.io/FoxCode/pen/NzPyrp

A jeżeli bym chciał, żeby pod tym również był div z obrazkiem? Odpada background: kolor;
 

komentarz 30 maja 2018 przez rafal.budzis Szeryf (82,700 p.)
Możesz wyciąć taki przezroczysty obrazek i nie kombinować :P

A w CSS dodajesz do jednego i drugiego przechylonego diva jeszcze jednego diva odchylasz go w drugą strone i dodajesz ten sam background co poniżej a następnie bawisz się z background-position

Daj chwilke to wrzuce pena ;)
komentarz 30 maja 2018 przez BlvckFox Gaduła (4,240 p.)
Rozumiem, ale czy przy takiej zabawie z background-position i ustawianiem na oko będzie to się dobrze wyświetlać na różnych urządzeniach?
komentarz 30 maja 2018 przez rafal.budzis Szeryf (82,700 p.)

Jak zrobisz to dobrze nie ma zadnych problemów przesyłam działające razem z RWD ;) 

https://codepen.io/anon/pen/yEyvrR

Podobne pytania

0 głosów
1 odpowiedź 128 wizyt
pytanie zadane 3 maja 2022 w JavaScript przez Maciek06 Użytkownik (680 p.)
0 głosów
1 odpowiedź 322 wizyt
pytanie zadane 25 marca 2021 w C i C++ przez p_wika Nowicjusz (190 p.)

90,401 zapytań

139,013 odpowiedzi

311,503 komentarzy

60,082 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...