In this post I want to doing a little CSS experiment, to creating the back side of an envelope, this example are using 7 div, one as a container, 6 div inside, with 4 div on the corner manipulated as a triangle.
The idea is by manipulating the CSS border value, to creating different type of triangle, playing with z-index property and adding shadow box in the middle element, If I sketch on the mockup sketch may look something like this image below.
Something that I haven’t found in this example is to adding the shadow effect in triangle, if I add this this will show as box with border, not a triangle, cause the CSS triangle actually just playing with border value, and this are the source code and demo example.
<!DOCTYPE html>
<html>
<head>
<title>CSS Evelopes</title>
<style type="text/css">
body {
background: #d9d9d9;
}
.envelope1 {
height: 200px;
width: 460px;
background: #e9e9e9;
margin: 0 auto;
margin-top: 100px;
-moz-box-shadow: 2px 2px 5px #333;
-webkit-box-shadow: 2px 2px 5px #333;
box-shadow: 2px 2px 5px #333;
}
.triangle {
width: 0;
height: 0;
float: left;
position: relative;
}
.left {
border-left: 30px solid transparent;
border-top: 75px solid #0033cc;
z-index: 3;
}
.right {
border-right: 30px solid transparent;
border-top: 75px solid #0033cc;
z-index: 2;
}
.left_bottom {
border-right: 30px solid #fff;
border-top: 150px solid transparent;
top: -25px;
}
.right_bottom {
border-left: 30px solid #fff;
border-top: 150px solid transparent;
top: -25px;
}
.mid {
-moz-box-shadow: 2px 2px 5px #333;
-webkit-box-shadow: 2px 2px 5px #333;
box-shadow: 2px 2px 5px #333;
z-index: 1;
background: #0033cc;
float:left;
position:relative;
width: 400px;
height: 75px;
}
.mid_bottom {
background: #fff;
z-index: 0;
float:left;
position:relative;
width: 400px;
height: 150px;
top: -25px;
}
</style>
</head>
<body>
<div class="envelope1">
<div class="triangle left"></div>
<div class="mid"></div>
<div class="triangle right"></div>
<div class="triangle left_bottom"></div>
<div class="mid_bottom"></div>
<div class="triangle right_bottom"></div>
</div>
</body>
</html>
This is a creative way to use CSS. Great effect!
thanks Johnathan