How to overlay divs with pure css? - css

Question

To create this effect:
It is possible or would I need to design it with software?

Answer 1

You could use gradient as background
div {
background: -moz-linear-gradient(-45deg, #1e5799 50%, #207cca 50%, #7db9e8 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(50%,#1e5799), color-stop(50%,#207cca), color-stop(100%,#7db9e8));
...
}
An example : http://jsfiddle.net/w9fYj/

Answer 2

You can do it with triangles (which basically works on border adjustments) How do CSS triangles work?
And other shapes for more
Here is extensive example with transforms of many divisions which may interest you.
Demo
HTML
<div class="wrapper">
<div class="shape3">
<div class="shape3-content">Hi there!</div>
</div>
<div class="shape1">
<div class="shape1-content">Hi there!</div>
</div>
<div class="shape2">
<div class="shape2-content">Hi there!</div>
</div>
</div>
css
.wrapper {
border: 1px solid #ff8888;
height: 480px;
left: 50%;
margin: -240px 0 0 -320px;
overflow: hidden;
position: absolute;
top: 50%;
width: 640px;
}
.shape1 {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
background-color: #fff;
border: 1px solid black;
height: 50%;
left: -25%;
position: absolute;
top: 70%;
width: 150%;
}
.shape1-content {
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
padding-left: 230px;
}
.shape2 {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
background-color: #fff;
border: 1px solid #88ff88;
bottom: 244px;
height: 100%;
position: absolute;
right: 50%;
width: 100%;
}
.shape2-content {
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
bottom: 10px;
position: absolute;
right: 10px;
}
.shape3 {
background:red;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
border: 1px solid #8888ff;
bottom: 40%;
height: 100%;
position: absolute;
right: 20%;
width: 100%;
}
.shape3-content {
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
bottom: 50%;
position: absolute;
right: 10px;
}

Answer 3

Here it is using pure CSS:
HTML
<div id="test">
</div>
CSS
#test {
widh:300px;
height:150px;
background:#C3C3C3;
position:relative;
overflow:hidden;
}
#test:after {
content:'';
position:absolute;
right:-100px;
top:10px;
transform:rotate(-30deg);
-webkit-transform:rotate(-30deg);
-moz-transform:rotate(-30deg);
-o-transform:rotate(-30deg);
-ms-transform:rotate(-30deg);
width:500px;
height:250px;
background:#880015;
}
And here is a FIDDLE

Answer 4

If you consider to support old browsers without using CSS3 then:
HTML
<div class="wrapper">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
CSS
.wrapper {
width: 400px;
height: 100px;
}
.left {
display: inline;
float: left;
background-color: #ccc;
width: 100px;
height: 100px;
}
.right {
display: inline;
float: right;
background-color: #610A0A;
width: 200px;
height: 100px;
}
.middle {
float:left;
display: inline;
line-height: 0%;
width: 0px;
border-top: 100px solid #ccc;
border-right: 100px solid #610A0A;
}
Fiddle Demo