Set Opacity on CSS Element - html

Question

I'd like the triangle shape at the foot of this page to be a solid colour with no transparency. Is this easy to achieve? I'm just not sure which element to target.
Here is my JSFiddle: http://jsfiddle.net/webtiki/fcLkW/9/
and my code :
css
html, body{
height: 100%;
margin:0;
}
.out{
height:100%;
position:relative;
overflow:hidden;
}
.in{
height:75%;
background-color:#6C2223;
}
.out:before, .out:after, .in:after{
content:'';
position:absolute;
bottom:25%;
width:100%;
height:700%;
background-color:#9A4445;
}
.out:before{
right:50%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform : rotate(-45deg);
transform : rotate(-45deg);
}
.out:after{
left:50%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform : rotate(45deg);
transform : rotate(45deg);
}
.in:after{
bottom:0;
width:100%;
height:25%;
background-color:#911618;
z-index:-1;
}
video{
min-width:100%;
min-height:100%;
height:auto;
width:auto;
position:absolute;
top:0;
z-index:10;
opacity:0.5;
}
html
<div class="out">
<div class="in"></div>
<video autoplay="" loop="" poster="http://artbees.net/themes/jupiter-demo/wp-content/uploads/2013/10/home-vid-img.jpg" id="bgvid">
<source src="http://artbees.net/themes/jupiter-demo/wp-content/uploads/2013/10/homepage.webm" type="video/webm">
<source src="http://artbees.net/themes/jupiter-demo/wp-content/uploads/2013/10/shutterstock_v3702740_4.m4v" type="video/mp4">
</video>
</div>
Can someone assist?
Many thanks for any pointers :-)

Answer 1

I think I got what you want. Change your CSS code with this (JSFiddle code):
html, body{
height: 100%;
margin:0;
}
.out{
height:100%;
position:relative;
overflow:hidden;
}
.in{
height:75%;
background-color:#6C2223;
}
.out:before, .out:after, .in:after{
content:'';
position:absolute;
bottom:25%;
width:100%;
height:700%;
background-color:#9A4445;
}
.out:before{
right:50%;
z-index:20;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform : rotate(-135deg);
transform : rotate(-135deg);
}
.out:after{
left:50%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform : rotate(315deg);
transform : rotate(315deg);
}
.in:after{
bottom:0;
width:100%;
height:25%;
background-color:#911618;
z-index:-1;
}
video{
min-width:100%;
min-height:100%;
height:auto;
width:auto;
position:absolute;
top:0;
z-index:10;
opacity:0.5;
}

Answer 2

The thing that you have done is put the video as the top element and reduced the opacity to show items behind it.
what you would need to do is change the following 2 values on the bottom and left/right shapes.
z-index: 20;
opacity: 0.5;
After doing this though as the bottom 1 is a whole block, it covers the whole video, may have to rethink your shapes, or use an image overlay.
http://jsfiddle.net/fcLkW/21/

Answer 3

You need just set the triangle to top layer, because now the block "DIV.inn" is under video, and you see it through transparent video.
Change your code like:
CSS
.out:before, .out:after, .in:after{
content:'';
position:absolute;
bottom:25%;
width:100%;
height:700%;
background-color:#9A4445;
z-index:1000;
}