Monday, August 12, 2013

How to make Tucked Corners using CSS3

How to make Tucked Corners using CSS3


Add code below to make your tucked corners in your div tag.

HTML Code of your div tag:

<div class="corners">
Add your content here
</div>

CSS Code of your div tag:

.corners { 
background: #f6f6f6;
height: 700px;
margin: 50px auto;
max-width: 600px;
position: relative;
width: 80%;
-webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
-moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
}
/* Corner Effect */
.corners:after,
.corners:before {
background: #e6e6e6;
content: '';
height: 50px;
position: absolute;
top: -25px;
width: 100px;
-webkit-box-shadow: 0 5px 10px -7px hsla(0,0%,0%,.5);
-moz-box-shadow: 0 5px 10px -7px hsla(0,0%,0%,.5);
box-shadow: 0 5px 10px -7px hsla(0,0%,0%,.5);
}
.corners:after {
left: -50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.corners:before {
right: -50px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
Disqus Comments