Code Snippet

Home » Code Snippets » CSS » Tucked Corners

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.

Reference URL

Subscribe to The Thread

  1. Wow, that awesome tricks..

  2. This is great I’ll be putting this to use soon. Thanks a million!

  3. Esther

    Will this work in Microsoft Internet Explorer 8/7 ?

  4. Michael Rose

    It works just fine in IE 9.0.3 on Vista Ultimate x64 SP2 w/ 12 GB RAM.

    This is very nice styling…

  5. 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

    • _John_

      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.

  6. Zach

    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?

  7. 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.

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~