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

Comments

  1. User Avatar
    Rudy Azhar
    Permalink to comment#

    Wow, that awesome tricks..

  2. User Avatar
    Harry Spencer
    Permalink to comment#

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

  3. User Avatar
    Esther
    Permalink to comment#

    Will this work in Microsoft Internet Explorer 8/7 ?

  4. User Avatar
    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. User Avatar
    Larry
    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

    • User Avatar
      _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. User Avatar
    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. User Avatar
    Jules @garden to go
    Permalink to comment#

    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. User Avatar
    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. User Avatar
    в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

  10. User Avatar
    Gabor Horvath
    Permalink to comment#

    Really nice. Thanks a lot.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag