• 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

VPS Starter Arubacloud
0 głosów
1,116 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 (227,510 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 (227,510 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 (227,510 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 (85,260 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 (85,260 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 (85,260 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 (85,260 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ź 271 wizyt
pytanie zadane 3 maja 2022 w JavaScript przez Maciek06 Użytkownik (680 p.)
0 głosów
1 odpowiedź 555 wizyt
pytanie zadane 25 marca 2021 w C i C++ przez p_wika Nowicjusz (190 p.)

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...