Cascading divs with bottom triangle borders
This is a follow-up to his question: Center of triangle at bottom of full width div is responsive
Again I am stuck with my CSS for a project involving a div with triangular borders at the bottom:
I want the row of cascading divs to look like this (bottom triangle colored red for demonstration purposes):
Now my code looks like this:
html, body {
padding: 0; margin: 0;
color: white;
}
.top {
background-color: #282C34;
height: 500px;
width: 100%;
position: relative;
}
.bottom {
background-color: #3B3E48;
height: 500px;
width: 100%;
}
.triangle {
border-left: 50vw solid transparent;
border-right: 50vw solid transparent;
width: 0;
height: 0;
bottom: -40px;
content: "";
display: block;
position: absolute;
overflow: hidden;
left:0;right:0;
margin:auto;
}
.upperTriangle {
border-top: 40px solid #282C34;
}
.lowerTriangle {
border-top: 40px solid red;
}
<div class="top">
<div class="triangle upperTriangle"></div>
</div>
<div class="bottom">
<div class="triangle lowerTriangle"></div>
</div>
<div class="top">
<div class="triangle"></div>
</div>
Code in JSFiddle: http://jsfiddle.net/rndwz681/
My problems:
- I cannot figure out how to properly align the triangles on the z axis.
- I cannot figure out how to properly align triangles with delimiters other than the first.
Thanks for the help for the help.
source to share
By adding position:relative;
to the class .bottom
and adding z-index:100;
to the class .triangle
, I was able to get your triangles to look the way you want.
See my fiddle: http://jsfiddle.net/rndwz681/1/
z-index sets the "layer" in which the object appears (higher number = closer to the user). It can only be applied to "positioned" elements, but your absolute positioned triangles qualify.
source to share
Powered by CSS Triangle Generator
.container {
width: 100%;
overflow: hidden;
}
.block {
width: 100%;
height: 200px;
}
.block--arrow {
position: relative;
}
.block--arrow:before {
display: block;
content: '';
position: absolute;
top: 0;
left: 50%;
margin-left: -350px;
width: 0;
height: 0;
border-style: solid;
border-width: 100px 350px 0 350px;
}
.grey {
background: #626262;
}
.light-grey {
background: #999999;
}
.light-grey:before {
border-color: #626262 transparent transparent transparent;
}
.black {
background: #000000;
}
.black:before {
border-color: #999999 transparent transparent transparent;
}
<div class="container">
<div class="grey block"></div>
<div class="light-grey block block--arrow"></div>
<div class="black block block--arrow"></div>
</div>
source to share