Блог

Я бы хотел, чтобы треугольная форма в нижней части этой страницы была сплошного цвета без прозрачности. Легко ли этого достичь? Я просто не уверен, на какой элемент ориентироваться.

Вот мой JSFiddle:http://jsfiddle.net/webtiki/fcLkW/9 /

и мой код :

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>
  

Кто-нибудь может помочь?

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

Я думаю, у меня есть то, что ты хочешь. Измените свой CSS-код с помощью этого (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;
}
  

То, что вы сделали, это поместили видео в качестве верхнего элемента и уменьшили непрозрачность, чтобы показать элементы за ним.

что вам нужно будет сделать, так это изменить следующие 2 значения для нижней и левой / правой фигур.

 z-index: 20;
opacity: 0.5;
  

После выполнения этого, хотя, поскольку нижний 1 — это целый блок, он покрывает все видео, возможно, придется пересмотреть ваши формы или использовать наложение изображения.

http://jsfiddle.net/fcLkW/21/

Вам нужно просто установить треугольник на верхний слой, потому что теперь блок «DIV.inn» находится под видео, и вы видите его через прозрачное видео.

Измените свой код следующим образом:

CSS

 .out:before, .out:after, .in:after{
content:'';
position:absolute;
bottom:25%;
width:100%;
height:700%;
background-color:#9A4445;
z-index:1000;
  

}