Border dostosowanie do wielkości okna%%%

Question

Zrobiłem takie cudo http://codepen.io/anon/pen/wMzjVj?editors=110

Mam z nim tylko mały problem, że czerwony kontener jest ustawiony na 80%, a ten biały ustawiłem żeby mieć takie przycięcie pod kątem. Problem polega na tym, że nie wiem jak dostosować ten biały kontener aby ostawiał się na 80% strony, tak jak ten ponad nim.

Answer 1

Tego tak nie zrobisz :/ 

Tutaj masz stronkę na której to zastosowano, http://damian.drygiel.com/#my-projects

Do tego robi się nowego diva :) inaczej musisz podawać długość w px, ostatnio to studiowałem :) 

.skew {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: -38%;
    width: 200%;
    height: 40%;
    background: url(../img/texture.png);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-transform: rotate(7deg) translateZ(0);
    -moz-transform: rotate(7deg) translateZ(0);
    -ms-transform: rotate(7deg) translateZ(0);
    -o-transform: rotate(7deg) translateZ(0);
    transform: rotate(7deg) translateZ(0);
}

Oczywiście zrób to po swojemu, ale pokazuję jak to +/- ma wyglądać :p 

Comments

Bardziej "na piechotę" i mniej "pro" można to zrobić np. tak: http://codepen.io/anon/pen/QyKxpo?editors=110 Obok tego trójkąta zrobić innego diva i tym samym przesunąć trójkąt w prawo.Tylko wysokość dodatkowego diva trzeba by ustawić na taką aby pokrywałą się z tymi borderami po prawej (trójkąt).

---

Kombinujesz, po co uczyć się więcej i mniej profesjonalnie, zapisu trochę jest ale nie jest to trudne, więc spokojnie może to ogarnąć :)

---

nie wiem o co chodzi Krzycho92 z tym co podałeś bo działa to tak samo jak mój przykład czyli zwyczajnie nie działa :/

Answer 2

Zrobiłem to tak: http://codepen.io/anon/pen/wMzjVj?editors=110