Блог

Я пытаюсь…

1) Сделайте так, чтобы мои формы CSS3 имели некоторый режим смешивания «умножения» amp;

2) Растяните всю область формы на полный размер веб-страницы.

Можно ли растянуть эту область на 100% по ширине и высоте веб-страницы и сделать всю область прозрачной, чтобы немного желтого цвета просвечивало?

 <div style="margin: 0 auto; 
            width: 0; 
            height: 0; 
            border: 100px solid #1F80AF; 
            border-left-color: #0099CC; 
            border-right-color: #0099CC;"></div>
  

У меня здесь есть JSFiddle.

Большое спасибо за любые указания.

Вот и все!

HTML

 <div class="wrap">

    <div class="absolute">
        Some content yo!
    </div>

</div>
  

css

     html,body {
    height:100%;
    margin:0;
    padding:0;
}
body {
    background:url(http://placehold.it/250) repeat 0 0;
}

div.wrap {
    position:relative;
    margin:0;
    padding:0;
    width: 100%;
    height:100%;
    box-sizing:border-box;
    -mox-box-sizing:border-box;
    border-top:rgba(25,25,255,0.8) solid 50vh; /* Nothing below IE8 or Firefox 19 */
    border-bottom:rgba(25,25,255,0.8) solid 50vh; /* Nothing below IE8 or Firefox 19 */
    border-left: rgba(0,0,255,0.5) solid 50vw;; 
    border-right: rgba(0,0,255,0.5) solid 50vw;;
    -moz-background-clip: content;     /* Firefox 3.6 */
      -webkit-background-clip: content;  /* Safari 4? Chrome 6? */
          background-clip: content-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
}

div.absolute {
    position:absolute;
    left:-50vw;
    top:-50vh;
}
  

Вот скрипка:
http://jsfiddle.net/485vb/4 /

Итак, в основном, что это делает, так это использует background-clip свойство, чтобы сказать: «держите содержимое непрозрачным, все, что снаружи, может быть прозрачным».

Затем мы используем vw и vh или единицы отображения, чтобы установить левую и правую границы чуть менее 50% ширины окна просмотра ( vw ) и установить верхнюю и нижнюю части чуть менее 50% высоты окна просмотра ( vh ).

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

РЕДАКТИРОВАТЬ комментарий GCyrillus тоже действительно хорошее решение.

ПРАВКА 2 обновлена, чтобы включить позиционированный контент.