Html + Css: Как создать автоматически изменяемый размер повернутого фона?

Question

изображение полной черной веб-страницы. На этой веб-странице находится белый делитель размером 100%, который заполняет всю страницу. Я хотел бы повернуть этот делитель на -7 градусов (или на 7 градусов против часовой стрелки). Это приведет к тому, что черный фон будет виден в треугольниках по краям, так же, как вы положили лист бумаги на стол и повернули его немного влево.

На самом деле это можно сделать с помощью некоторых CSS, и это работает довольно хорошо (за исключением IE).

Реальная проблема сейчас заключается в: Я хотел бы иметь обычный, не повернутый элемент div для отображения содержимого, чтобы вращался только фон.

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

Как я могу это понять? Лучшим было бы решение, работающее в современных браузерах Webkit, FF3.5 + и IE7 +. Если бы только IE8 + я тоже мог с этим жить.

Answer 1

Используйте position:absolute; на фоне и z-index на заднем плане. Вот пример.

Answer 2

Вы должны повернуть его назад ... http://jsfiddle.net/gFCHE/ Не размыто на Chrome или ChromeOS. Этого не должно быть нигде.

Добавьте overflow:hidden к #crooked для классного эффекта с изображениями. Этот CSS поможет вам начать, но вам нужно настроить его так, как вы хотите.

<div id='wrap'>
    <div id='cooked'>
        <div id='straight'>
        </div>
    </div>
</div>


  #wrap{
    background:#000;
    height:100%;
}
#crooked{
    height:100%;
    color:#f00;
     -moz-transform: rotate(-7.0deg);  /* FF3.5+ */
       -o-transform: rotate(-7.0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(-7.0deg);  /* Saf3.1+, Chrome */
      -ms-transform: rotate(-7.0deg);  /* IE9 */
          transform: rotate(-7.0deg);  
          filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
                 M11=0.992546151641322, M12=0.12186934340514748, M21=-0.12186934340514748, M22=0.992546151641322, sizingMethod='auto expand');
           zoom: 1;
}

завернуть {

    background:#000;
    height:100%;
}
#crooked{
    height:100%;
    background:#fff;
     -moz-transform: rotate(-7.0deg);  /* FF3.5+ */
       -o-transform: rotate(-7.0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(-7.0deg);  /* Saf3.1+, Chrome */
      -ms-transform: rotate(-7.0deg);  /* IE9 */
          transform: rotate(-7.0deg);  
          filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
                 M11=0.992546151641322, M12=0.12186934340514748, M21=-0.12186934340514748, M22=0.992546151641322, sizingMethod='auto expand');
           zoom: 1;
}
#straight{
     -moz-transform: rotate(7.0deg);  /* FF3.5+ */
       -o-transform: rotate(7.0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(7.0deg);  /* Saf3.1+, Chrome */
      -ms-transform: rotate(7.0deg);  /* IE9 */
          transform: rotate(7.0deg);  
         filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
                 M11=0.992546151641322, M12=-0.12186934340514748, M21=0.12186934340514748, M22=0.992546151641322, sizingMethod='auto expand');
           zoom: 1;

Answer 3

Попробуйте использовать

#content {

 position: absolute;
 z-index: 500;
 margin-left: auto;
 margin-right: auto;
}

#background {
//Your white DIV
}


<div id="background"></div>

<div id="content">
 Lorem ipsum
</div>