Grow your CSS skills. Land your dream job.

Last updated on:

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

Comments

  1. Wow, that awesome tricks..

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

  3. Esther
    Permalink to comment#

    Will this work in Microsoft Internet Explorer 8/7 ?

  4. Michael Rose
    Permalink to comment#

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

    This is very nice styling…

  5. Permalink to comment#

    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_
      Permalink to comment#

      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
    Permalink to comment#

    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.

  8. Tyler
    Permalink to comment#

    I thought I could at least do my part – I also added some padding because the content was covered.

    JSFiddle Example

  9. вaкa тєиѕai
    Permalink to comment#

    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

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".