CSS3 full-width rotate

Question

Я хотел бы повернуть полный div (из стороны в сторону без свободного места), в котором будет некоторый контент.

Я хочу, чтобы углы с правой стороны касались правой стороны страницы, а углы на левой стороне касались левой стороны страницы. Я не думаю, что width:200% и overflow-x:hidden - лучшее решение.

Как я могу это достичь?

Вот пример. Обратите внимание, что углы не касаются сторон страницы.

.rotated { 
 
    width: 100%; 
 
    height: 100px; 
 
    background-color: red; 
 
    -moz-transform: rotate(-6deg); 
 
    -webkit-transform: rotate(-6deg); 
 
    -o-transform: rotate(-6deg); 
 
    -ms-transform: rotate(-6deg); 
 
    transform: rotate(-6deg); 
 
}

<div class="rotated"></div>

Answer 1

Вы можете найти CSS transformskewY() полезным. Он будет искажать элемент, не поворачивая углы.

Я также установил transform-origin в верхнем правом углу, чтобы элемент не перекосил верхнюю часть страницы.

html,body { 
 
    margin: 0; 
 
} 
 

 
.rotated { 
 
    height: 100px; 
 
    background-color: red; 
 
    -webkit-transform-origin: top right; 
 
    -ms-transform-origin: top right; 
 
    transform-origin: top right; 
 
    -webkit-transform: skewY(-6deg); 
 
    -ms-transform: skewY(-6deg); 
 
    transform: skewY(-6deg); 
 
}

<div class="rotated"></div>

Для дальнейшей ссылки см Skewing and Translating пример в MDN.

Answer 2

Вы можете увеличить горизонтальную часть с масштабом, но содержание будет масштабироваться, а также (до тех пор, как вы знаете, что вы можете компенсировать)

.rotated { 
 
    width: 100%; 
 
    height: 100px; 
 
    background-color: red; 
 
    transform: scale(1.2 , 1) rotate(-6deg); 
 
}

<div class="rotated"></div>