CODEWITHSUNDEEP
css
goodguy_cakephp
goodguy_cakephp

Reputation: 243

How to overlay divs with pure css?

To create this effect:

enter image description here

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

Upvotes: 0

Views: 397

Answers (4)

Felix
Felix

Reputation: 38102

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

Upvotes: 0

Karim AG
Karim AG

Reputation: 2193

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

Upvotes: 1

4dgaurav
4dgaurav

Reputation: 11496

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

Upvotes: 1

Vangel Tzo
Vangel Tzo

Reputation: 9313

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/

Upvotes: 2

Related Questions