CSS3 Shape Issue - Blend Mode Multiply

Question

I am trying to...

1) Make my CSS3 shapes have some 'multiply' blend mode &

2) Stretch the entire shape area the full size of the web page.

Is it possible to stretch this area 100% width & height of the web page AND make the whole area transparent so some yellow comes through?

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

I have a JSFiddle here.

Many thanks for any pointers.

Answer 1

Here you go!

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;
}

Here's the fiddle: http://jsfiddle.net/485vb/4/

So, basically what this does is uses the background-clip property to say, "keep the content opaque, everything outside can be transparent."

Then we use vw and vh or viewport units to set the left and right borders to just under 50% of the viewport-width (vw) and set the top and bottom just under 50% of the viewport-height (vh).

This should get you close to what you want to do.

EDIT GCyrillus comment is really good solution, too.

EDIT 2 Updated to include positioned content.