How to create two triangles with overlaying? - html

Question

I need to create the following shape on the image. Where is the photo there will variable content as a slider. What I tried so far is create it with border-width, but the problem is that I'm not able to put the small triangle under photo because of the bigger triangle.
What I've done you can find here on live demo. Maybe I have to use other approaches? Does someone how to solve it?
.header {
float: left;
width: 100%;
background: red;
padding-top: 50px;
padding-bottom: 200px; }
.content {
float: left;
width: 100%;
background: blue;
padding: 50px 0; }
.shape {
position: relative;
float: left;
width: 100%; }
.shape--1:before {
border-top-color: yellow;
border-right-color: transparent;
border-left-color: transparent;
border-bottom-color: transparent;
border-style: solid;
border-width: 160px 330px 0 0;
content: " ";
height: 0;
position: absolute;
top: -130px;
width: 0;
z-index: 30; }
.shape--2:before {
background: transparent;
border-bottom-color: transparent;
border-left-color: blue;
border-right-color: transparent;
border-style: solid;
border-top-color: transparent;
border-width: 130px 0 0 100vw;
content: " ";
height: 0;
position: absolute;
top: -130px;
width: 0;
z-index: 20; }
<div class="header">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam accusamus, quis labore sapiente et ab at! Repudiandae commodi nam quod? - There will be slider with different background, same color should be also in the shape.
</div>
<div class="shape">
<div class="shape--1"></div>
<div class="shape--2"></div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente eos maiores repellendus doloribus dignissimos iusto neque accusantium itaque. Aspernatur, cupiditate ab debitis placeat ad harum, nobis, iste deserunt impedit quaerat dicta nemo accusamus velit mollitia quis quos numquam labore distinctio eveniet. Consequatur culpa dicta harum quo quia similique, numquam tempore.
</div>

Answer 1

What I did is first create the element that holds the photo, then I created a rectangular shape in the body background color, rotated it and made it overflown. Then inside of it I placed another rectangular block that I rotated in the opposite way of the original triangle:
HTML:
<div class="photo"></div>
<div class="triangle"></div>
CSS:
body {
background: #fff;
overflow:hidden;
padding: 0;
margin: 0;
}
.photo {
width: 100%;
height: 200px;
background: red;
}
.triangle {
position: absolute;
background: #fff;
left: -100px;
right: -100px;
height: 300px;
transform: rotate(5deg);
transform-origin: 100% 100%;
overflow: hidden;
}
.triangle:after {
content: "";
display: block;
width: 400px;
height: 200px;
position: absolute;
background: orange;
left: 0;
top: -180px;
transform: rotate(-20deg)
}
And here is a working fiddle:
https://jsfiddle.net/62o7wqom/2/
Edit: Added overflow:hidden to the body tag to avoid having a horizontal scrollbar because of the absolutely positioned element...overflowing the body.

Answer 2

The easiest way of doing it would be setting a background-color on a containing div and use clip-path on the actual image. That would give you the effect you're looking for.
If you don't want the triangle to move with the slider you can either create another wrapper div or just create a pseudo after-element and position it on top of the image.

Answer 3

you may use some Pythagore stuff to calculate more precisely angles and sizes, but the idea is here.
.shape {
width: 100%;
height: 5em;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0, 25% 0, 0 100%);
}
.header {
text-align: center;
font-variant: small-caps;
font-size: 2em;
}
<div class=header>
<div class=shape style="background-image: url('http://backgrounds.mysitemyway.com/wp-content/uploads/2009/03/bamboo-001126-asparagus-fern-green.jpg')"></div>
awesome header
</div>
<div class=content>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente eos maiores repellendus doloribus dignissimos iusto neque accusantium itaque. Aspernatur, cupiditate ab debitis placeat ad harum, nobis, iste deserunt impedit quaerat dicta nemo accusamus velit mollitia quis quos numquam labore distinctio eveniet. Consequatur culpa dicta harum quo quia similique, numquam tempore.
</div>

Answer 4

One posibility using an inner element to contain the image.
This element is rotated, and inside a pseudo there is the image, counter-rotated.
.test {
font-size: 30px;
width: 400px;
height: 200px;
border: solid blue 1px;
background-size: 200px 200px;
background-repeat: no-repeat;
position: relative;
}
.inner {
position: absolute;
width: 140%;
height: 140%;
bottom: 0px;
right: 0px;
z-index: -1;
transform: rotate(26.4deg);
transform-origin: right bottom;
overflow: hidden;
}
.inner:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-image: url(http://lorempixel.com/800/400);
background-size: cover;
transform: rotate(-26.4deg);
transform-origin: right bottom;
}
.triangle {
position: absolute;
width: 200px;
height: 200px;
top: 0px;
left: 0px;
background-image: linear-gradient(to right bottom, red 50%, transparent 50%);
z-index: -2;
}
<div class="test">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..
<div class="inner"></div>
<div class="triangle"></div>
</div>

Answer 5

Here I made a jsfiddle take a look just with your answer I made some css changes. Hope it helps.
.shape-1{
width: 0;
height: 0;
border-top: 0 solid transparent;
border-bottom: 160px solid transparent;
border-left: 0vw solid green;
border-right: 97vw solid green;
position:relative;
top: -130px;
}
.shape-2{
width: 0;
height: 0;
border-top: 0 solid transparent;
border-bottom: 130px solid transparent;
border-left: 42vw solid yellow;
border-right: 0vw solid yellow;
position:relative;
top:0px;
}
.header{
position: absolute;
z-index: 1;
}
<div class="shape">
<div class="header">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam
accusamus, quis labore sapiente et ab at! Repudiandae commodi nam quod?
</div>
<div class="shape-2"></div>
<div class="shape-1"></div>
</div>

Answer 6

I noticed that you have already accepted an answer, but I figured I would still post some code that could help. This would require some fine tuning given what else you may have going on in your project, but it could get the job done.
.LeftT {
position: absolute;
top: 0rem;
left: 0rem;
border-left: 30rem solid #02A698;
border-right: 6rem solid transparent;
border-bottom: 8rem solid transparent;
border-top: 0rem solid transparent;
}
.RightT {
position: absolute;
top: 0rem;
left: -5rem;
border-top: 0rem solid #004F49;
border-left: 0rem solid transparent;
border-bottom: 8rem solid transparent;
border-right: 45rem solid #004F49;
}
p{
position: absolute;
top: 0rem;
left: 15rem;
z-index: 1;
}
<div class="LeftT"></div>
<div class="RightT"></div>
<p style="color:white;text-align:right;padding-right:1rem;font-size:1.1rem;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis velit.
</p>