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

css responsywny div z transform.

Aruba Cloud - Virtual Private Server VPS
0 głosów
198 wizyt
pytanie zadane 6 maja 2018 w HTML i CSS przez Tradereu Użytkownik (780 p.)

Witam, chciałbym utworzyć  diva o nietypowym kształcie, domyślam się ze trzeba użyć transform i overflow. zanim utworzyłem posta sam próbowałem sam uzyskać efekt jednak mi się nie udawało, dlatego proszę o pomoc.

(zdjęcie w celu dokładniejszej interpretacji problemu  zdjęcie po lewej tekst po prawej)

2 odpowiedzi

0 głosów
odpowiedź 6 maja 2018 przez Dawid Glomba Obywatel (1,220 p.)
wybrane 6 maja 2018 przez Tradereu
 
Najlepsza

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.c-1 {
  background: #333;
  overflow: hidden;
  position: relative;
}

.c-2 {
  float: left;
  width: 50%;
  position: relative;
  color: #fff;
  padding: 50px;
}

.bg-image {
  position: absolute;
  width: 50%;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 0;
  background-image: url(http://placehold.it/350x150);
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: 0;
}

section {
  position: relative;
  color: #fff;
}

.diagonal {
  position: relative;
  z-index:1;
}

.diagonal:after {
  right: 0;
  left: 100px;
  position: absolute;
  -webkit-transform: skewX(-15deg) rotate(180deg);
  -ms-transform: skewX(-15deg) rotate(180deg);
  transform: skewX(-15deg) rotate(180deg);
  content: "";
  top: 0;
  width: 100%;
  height: 100%;
  background: #333;
  z-index:-1;
}
<section class="c-1">
  <div class="c-2 diagonal">
    <h1>
    Work with us
    </h1>
    <p>
      Scelerisque et parturient dis a erat cubilia congue sociosqu vel porta sem posuere a malesuada suspendisse id commodo. Dui consequat consectetur luctus odio nibh a vel sapien hendrerit ad a consectetur cursus a nisl posuere. A cubilia varius dapibus non
      scelerisque aliquam imperdiet nec montes suspendisse orci potenti dignissim vestibulum venenatis sociosqu ullamcorper vestibulum scelerisque magna sem ultricies convallis cras. Ante sed elit tristique interdum hendrerit nascetur a cras suspendisse
      mi fermentum vestibulum auctor a taciti euismod ac non adipiscing a. Maecenas parturient a dui sodales vestibulum nisl nisi consequat cum lacus lobortis senectus metus at adipiscing cursus parturient a.
    </p>
  </div>
  <div class="bg-image"></div>
</section>

 

0 głosów
odpowiedź 6 maja 2018 przez niezalogowany

Próbowałeś clip-path? Tu się można pobawić -> clip path maker

Podobne pytania

+1 głos
2 odpowiedzi 287 wizyt
pytanie zadane 22 listopada 2021 w HTML i CSS przez Billy Użytkownik (680 p.)
0 głosów
1 odpowiedź 132 wizyt
pytanie zadane 25 czerwca 2018 w HTML i CSS przez grands14320 Obywatel (1,080 p.)
+1 głos
0 odpowiedzi 339 wizyt

93,327 zapytań

142,323 odpowiedzi

322,396 komentarzy

62,657 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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...