[C.....x]

#webdev #css #pytaniedoeksperta
Witam, jak zrobić te wystające gówno w css żeby div się nie sypał przy responsywności? Nie proszę o kod, tylko o koncept bo dopiero raczkuję w tych sprawach ( ͡° ͜ʖ ͡°)

[t.....y]

@Chudzinx: ja bym dal before element i margin na minusie

[Melcma]

@Chudzinx: overflow hidden?

[fermentka]

@Chudzinx: tak jak pisze @thcluboy before element, dla przesuniecia w lewo moze byc margin na miusie luc position: absolute i left: -x. Jesli chodzi o ksztalt to mozesz ten efekt osiagnac odpowiedznio bawiac sie wlasciwoscia border. Jesli nie wiesz jak to zrobic, odezwij sie.

[C.....x]

@fermentka: jeśli możesz to napisz jak z tym border zrobić bo ja chciałem img tej "flagi" wstawić ale to chyba nie najlepszy pomysł bo by mogło się źle skalować (pracuję na bootstrapie jak coś).

[emtei]

@Chudzinx: Ja bym to zrobił tak:
Zwykły div z żółtym tłem. Position relative. Dla niego :before (górny żółty trójkąt) i :after (dolny żółty trójkąt) oba na pos absolute i przesunięte w lewo. Trójkąty przy pomocy CSS Triangle

[fermentka]

@Chudzinx: wytlumaczenia jak to dziala mozesz znalezc tutaj: https://www.webtie.pl/blog/trojkaty-za-pomoca-css

A tutaj masz Twoj konkretny przypadek.

[C.....x]

@emtei: @fermentka: dziękuję, coś takiego zrobiłem, tylko teraz pytanie jak to będzie wyglądać jak to wszystko wsadzę w bootstrapa ( ͡° ͜ʖ ͡°)
https://jsfiddle.net/sw6kv45a/

[fermentka]

@Chudzinx: na pewno jest jakis sposob, aby ozenic to z bootstrapem, ale w tym juz Ci prawdopodobnie nie pomoge, bo uzywam foundation. Daj znac prosze czy sie udalo :)

[C.....x]

@fermentka: udało się przy pomocy :before i :after, wszystko ładnie się skaluje

[fermentka]

@Chudzinx: a jak sam efekt wstazki, ten robiony za pomoca border?

[C.....x]

@fermentka: mniej więcej coś takiego https://jsfiddle.net/vxffcpz7/