[css] efekt pochylenia tła skewY, czy można lepiej to rozwiązać? Opcje

[lukash82]

Witam,

Chciałbym uzyskać taki efekt pochylonych brzegów kolejnych sekcji na stronie typu one page.

Coś takiego jak w tym szablonie: http://www.templatemonster.com/demo/52331.html

Wymyśliłem sobie coś takiego, dla dwóch sekcji, które leżą jedna pod drugą.

[HTML] pobierz, plaintext 
<section id="one">
		<div class="content">
			(...)	
		</div>
	</section>
 
	<section id="two">
		<div class='skew_del'>
			<div class="content">
				(...)	
			</div>
		</div>
	</section>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
#one {
	background			: yellow;}
#two {
	background			: red;
	transform				: skewY(2deg);
        -webkit-transform		: skewY(2deg);
	margin-top: -50px;}
#two .skew_del{
	transform				: skewY(-2deg);
        -webkit-transform		: skewY(-2deg);}
[CSS] pobierz, plaintext 

Pierwsza sekcja bez filozofii. Drugą sekcję z tłem obracam za pomocą skewY o 2 stopnie, a następnie zawartość tej sekcji obracam z powrotem o -2 stopnie.

Działać działa. Czy takie rozwiązanie jest eleganckie? Proszę o opinię lub ew. wskazówki, jeśli istnieje lepsze rozwiązanie. Pozdrawiam, Ł.



Teraz jeszcze zauważyłem, że w tych teksty w tych pochylanych i potem "odchylanych" div-ach są takie mało wyraźne. Także chyba jednak muszę szukać innego rozwiązania:/

Ten post edytował lukash82 3.03.2016, 19:06:16