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:/

Jeśli kontener ma ustaloną wartość w px lub jest na całą szerokość to można użyć triangle borders:
https://jsfiddle.net/qrctystx/1/

Jeśli nie, to można kombinować z pseudoelementami after, before lub svg.