Code Snippet
Tucked Corners
<div class="corners">
Content
</div>
body {
background: #e6e6e6;
}
.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);
}
More robust example including bottom corners at the Reference URL.
Wow, that awesome tricks..
This is great I’ll be putting this to use soon. Thanks a million!
Thanks to @iKreativ, we’ve updated the code to play nicer with Mozilla.
The updated code is here http://playground.genelocklin.com/tucked-corners/#updated.
Still a work in progress. Glad you guys like it.
Will this work in Microsoft Internet Explorer 8/7 ?
It works just fine in IE 9.0.3 on Vista Ultimate x64 SP2 w/ 12 GB RAM.
This is very nice styling…
Sorry, Newbie here! (yes, but we all started somewhere!).
Just so I understand, I opened Fiddle (very awesome) and if I understand this correctly, I paste in my .css code to my .css and then put in my .html code into my page. Correct?
If yes, nothing works. What could I be doing wrong?
Larry
JSFiddle? Paste the css into the portion than says ‘css’ (top right by default) and for your html portion into ‘html’ (top left by default). Once your code is in just hit run and your good to go. If you go to http://dabblet.com you can add in code and see your results in real time, as long as your syntax is correct.
Hey Guys!
I was just curious how would you make it so the same class would put the tucks on the bottom?
Or do you need to split it to two divs?
After using this code, Its actually easier then u think to apply the rounded corner effect to css divs and make the overall appearance of the website look really good.
DigWP
A book and blog co-authored by Jeff Starr and myself about the World's most popular publishing platform.
Quotes on Design
Design, like Art, can be an elusive word to define and an awfully fun thing to have opinions about.
HTML-Ipsum
One-click copy to clipboard access to Lorem Ipsum text that comes wrapped in a variety of HTML.
Bookshelf
Hey Chris, what books do you recommend? These, young fertile mind, these.