How to overlay divs with pure css?

Question

To create this effect:

enter image description here

It is possible or would I need to design it with software?

What have you tried? Please show, at the very lest an attempt to answer your own question. — Paulie_D, Apr 22 '14 at 09:39
are this a single element or are those two different elements? Which browser do you need to support? — Fabrizio Calderan, Apr 22 '14 at 09:42

score 2 · Accepted Answer · answered Apr 22 '14 at 09:40

2

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/

answered Apr 22 '14 at 09:40

Vangel Tzo

8,885
3
26
32

Thanks, I think that is exactly what I expected! Where could be ajusted the merge position? In your eg is right at middle – goodguy_cakephp Apr 22 '14 at 09:53
@goodguy_cakephp you could change the merge position if you increase or decrease the colors percentage 'background: linear-gradient(135deg, #1e5799 66%,#207cca 50%,#7db9e8 100%);' and example : http://jsfiddle.net/w9fYj/2/ – Vangel Tzo Apr 22 '14 at 09:56
1

Thumbs up :) Thanks for your help – goodguy_cakephp Apr 22 '14 at 10:04

score 1 · Answer 2 · edited May 23 '17 at 11:49

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;
}

score 1 · Answer 3 · answered Apr 22 '14 at 09:52

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

score 0 · Answer 4 · answered Apr 22 '14 at 10:02

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

How to overlay divs with pure css?

4 Answers4

HTML

CSS