Проблема формы CSS3 — умножение в режиме наложения

Я пытаюсь...

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

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 здесь.

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


css blend css-shapes
person michaelmcgurk    schedule 30.06.2014    source источник
comment
не слишком уверен в том, что вы ищете. Вы можете нарисовать форму через фон с цветами rgba(). как это ? jsfiddle.net/GCyrillus/485vb/3   -  person G-Cyrillus    schedule 30.06.2014
comment
@GCyrillus это отличный комментарий! Я попробую это в своем решении и посмотрю, как я пойду - большое спасибо!   -  person michaelmcgurk    schedule 30.06.2014

Ответы (1)


arrow_upward
0
arrow_downward

Ну вот!

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).

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

EDIT Комментарий GCyrillus тоже действительно хорошее решение.

EDIT 2 Обновлено, чтобы включить позиционированный контент.

person disinfor    schedule 30.06.2014
comment
Ничего себе - я думаю, что мы почти там!!! Ради интереса, если бы я хотел разместить контент на оверлее, как бы я это сделал? - person michaelmcgurk; 30.06.2014
comment
@michaelmcgurk использует абсолютное позиционирование :) - person G-Cyrillus; 30.06.2014
comment
@GCyrillus Ну, это было легко!! Спасибо!! :-) - person michaelmcgurk; 30.06.2014