<div class="corners"> Content </div>body { background: #e6e6e6; } .corners { background: #f6f6f6; height: 700px; margin: 50px auto; max-width: 600px; position: relative; width: 80%; box-shadow: 0 1px 7px hsla(0, 0%, 0%, 0.2); } /* Corner Effect */ .corners:after, .corners:before { background: #e6e6e6; content: ''; height: 50px; position: absolute; top: -25px; width: 100px; box-shadow: 0 5px 10px -7px hsla(0, 0% ,0%, 0.5); } .corners:after { left: -50px; transform: rotate(-45deg); } .corners:before { right: -50px; transform: rotate(45deg); }See the Pen Tucked Corners by Chris Coyier (@chriscoyier) on CodePen.
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?
Yes may be ! css has only
:beforeand:afterAfter 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.
I thought I could at least do my part – I also added some padding because the content was covered.
JSFiddle Example
Thanks alot , but for the content you need to put the content into another div and apply some selectors to make some margin in order not to make the content appear under the tucked corner . It still an amazing idea , Thanks alot Chris :D
Really nice. Thanks a lot.