Skocz do zawartości
  • Przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników, przeglądających tę stronę.

pBartnik

Dwie skośne kolumny w CSS po 50% szerokości. Jak pochylić div 100%

Promowane odpowiedzi

kRlrhP.jpg

 

Nie wiem jak się za to wziąć bo cały div musi mieć 100% ekranu ;/

 

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Najlepiej przez transform skew ale można też użyć background gradient

 

HTML

<div class="pecetowicz">
  <div> jakiś tekst </div>
  <div> jakiś tekst 2 </div>
</div>

CSS

.pecetowicz {
  display: flex;
  margin:1em;
  border: solid;
  background: linear-gradient(100deg, #4B9BE7 49.75%, black 50%, black calc(50% + 3px), #F9ABC9 calc(50% + 4px));
}

.pecetowicz div {
  flex:1;
  color:#fff;
  padding: 1em 2%;
}

 

  • Lubię to! 2

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

A jakbym chciał jeszcze diva by wyśrodkować zawartość w środku?

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Łap znalezionego gotowca, wyśrodkowany tekst + responsywność:

 

żeby zmienić pochylenie odwróć po prostu wartości skewx

.row section {
  -webkit-transform: skewx(-22deg);
}

.row section div {
  -webkit-transform: skewx(22deg);
}

 

  • Lubię to! 2

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Utwórz konto

Utwórz konto. To darmowe i bardzo proste!

Zarejestruj nowe konto

Zaloguj się

Posiadasz już konto? Zaloguj się tutaj.

Zaloguj się teraz


×