Folded corner mixin

With the growing browser support of some great CSS3 features, you can easily create a folded corner effect. In this article, I will show you an example and give you the references to go further.

The story

Create a robust, flexible cut/folded corner effect with CSS: http://jsfiddle.net/csswizardry/LTugt/

— Harry Roberts (@csswizardry) January 16, 2014

The inspiration started with this tweet from Harry Roberts. Harry is a consultant front-end architect, known under the nickname of csswizardy. I am a big fan of his work. He wrote some articles that became a reference for the community, for example about writing DRY CSS, about the BEM syntax or about the use of a shame.css stylesheet.

So I got used to look at his work closely. In the case of the cut corner, he chose a solution with the maximum browser support. So the solution proposed has a lot of constraints:

• The background behind the page has to be known,
• A position: relative is applied to the page element,
• The two pseudo-elements of the page are used.

I learned, in 2011 (!), how to create beveled corner with a linear-gradient background thanks to this great article of Lea Verou. So I wanted to create the same folded corner effect with less constraints by using modern CSS.

Why a mixin

I usually show my code in pure CSS and propose an implementation with a preprocessor. But this code will not be easily maintainable without a preprocessor, because to create this effect you have to:

• Use values several times,
• Make multiplications & divisions.

This code produces a lot of lines without explicit purpose, so it's better to use it as a mixin. This way, you will be able to group the lines that are needed for the effect and the ones that are just here for the demo. You will also able to customise the effect by using it with your own values.

The result

Here is what the folded corner effect looks like:

Play with this example on jsfiddle

And here is my mixin implementation:

// [Public] Create a page with folded corner effect in CSS.
@mixin folded-corner(
  $page-padding: 15px,
  $page-radius: 5px,
  $page-background: white,
  $fold-size: 50px,
  $fold-color: rgba(10, 10, 10, 0.2)
) {
  // Render the page style with a transparent corner
  & {
    min-width: 2 * $fold-size;
    min-height: 2 * $fold-size;
    padding: $page-padding;
    border-radius: $page-radius;

    // Soften the corner between the page and the fold
    border-top-right-radius: 1.2 * $fold-size;

    @include transparent-corner($page-background, $fold-size);
  }

  // Wrap the text around the corner
  &:before {
    content: "";
    float: right;
    width: $fold-size;
    height: $fold-size;
    border-bottom-left-radius: $page-radius;

    // Move the padding from top+right to left+bottom
    position: relative;
    top: -$page-padding;
    right: -$page-padding;

    box-shadow: -1px 1px 1px rgba(40, 40, 56, 0.7);
    @include transparent-corner($fold-color, $fold-size);
  }
}

// [Private] Apply a background with a transparent corner (top right)
@mixin transparent-corner($background, $size) {
  $diagonal: $size / 1.414;
  background: $background;
  background: -webkit-linear-gradient(
      225deg,
      transparent $diagonal,
      $background $diagonal
    ) right top;
  background: linear-gradient(
      225deg,
      transparent $diagonal,
      $background $diagonal
    ) right top;
}

Conclusion

According to caniuse, CSS gradients have almost 80% of browser support. For an effect like this one, which is mainly decorative, I think you can use it. You will have a great code with few constraints on the HTML architecture.

tl;dr

Read the article of Lea Verou about how to create beveled corner.