tło transform: rotate

pytanie zadane 17 kwietnia 2017 w HTML i CSS przez czujek22 Dyskutant (7,670 p.)

Jaki jest sposób aby zrobić efekt transform: rotate ale bez białego tła pod załamanym elementem.

http://codepen.io/czujek22/pen/xgoGoM

Chodzi o to, aby to żółte było bez białego tła. W tym tle znalazłby się np kolejny div z czyms innym

2 odpowiedzi

odpowiedź 17 kwietnia 2017 przez betman Bywalec (2,630 p.)

Tak już podsyłam kodzik :

HTML :

<html>
  <head>
    <meta charset="utf-8">
    <title>Struktura</title>
  </head>
  <body>
    <div class="header"></div>
    <div id="tlo">
    <div class="rotate"></div>
    </div>
  </body>
</html>

Oraz CSS:

body {
   margin: 0;
   background-color: black;
}
.header {
  width: 100vw;
  height: 100vh;
  background: blue;
  background-attachment: fixed;
}
.rotate {
  width: 100vw;
  height: 300px;
  background: yellow;
  transform: rotate(5deg);
}

#tlo {
  background-color: black;
}

Stworzyłem nowego diva o identyfikatorze kolor do niego dodałem wcześniej przez Ciebie utworzoną klasę rotate i przypisałem kolor. O to chodziło ? Pozdrawiam.

komentarz 17 kwietnia 2017 przez czujek22 Dyskutant (7,670 p.)

Ano w zasadzie proste jak drut xd Jednak fajniej by to wyglądało jakby ten div z nadanym rotate był na srodku tych 2 divow okalających. Tzn żeby to bardziej było na środku aby łądnie łączyło pierwszy i ostatni div

odpowiedź 17 kwietnia 2017 przez pablop76 VIP (123,540 p.)

Witam.

<html>
  <head>
    <meta charset="utf-8">
    <title>Struktura</title>
  </head>
  <body>
    <div class="header"></div>
  </body>
</html>

body {
   margin: 0;
}
.header {
  width: 100vw;
  height: 100vh;
  background: blue;
  background-attachment: fixed;
}
.header:after{
	  background: yellow none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 208px;
    left: 0;
    margin: 0 -10px -132px;
    position: absolute;
    right: 0;
    transform: rotate(5deg);
    z-index: 2;
}