Folded corner

by Thomas ZILLIOX

HTML

<div class="folded-page">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>


    <p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis.</p>

</div>

SCSS

/* FOLDED CORNER DEMO
 * More detail in the article:
 * http://tzi.fr/css/lab/folded-corner-mixin
 */

/* Public mixin:
 * 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);
    }
    
    /* Render the folded corner style
     * 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 mixin:
* Apply a background with a transparent corner (top right)
*/ 
@mixin transparent-corner($background, $size) {
    $diagonal: $size / 1.414;
    background: $background;
    background: linear-gradient(225deg, transparent $diagonal, $background $diagonal) right top;
}

/* Current demo style
 */
html {
    padding: 50px;
    background: black url(https://tzi.fr/css/folded-corner-mixin/subtlepattern.png) fixed;
}

.folded-page {
    @include folded-corner();
    text-align: justify;
    
    > p:first-child {
        margin-top: 0;
    }
    > p:last-child {
        margin-bottom: 0;
    }
}

body {
  background: transparent;
}