<div class="shape blue">3rem,bottomright</div>
<div class="shape red">1rem,bottomright</div>
<div class="shape green">5rem,:hover</div>
<div class="shape purple">topright, 10%</div>
<div class="shape orange">topleft,40%</div>
<div class="shape dark">bottomleft,5%</div>

<a href="https://github.com/juanbrujo/flatCornerFold.less" target="_blank">Github</a>
/**
 * flatCornerFold.less

 * Use: 
 * .flatCornerFold(@foldSize,color,bgcolor,direction,intensity)

 * Example:
 * @color: #ecf0f1;
 * @bgcolor: #ecf0f1;
 * @foldSize: 3rem;
 * selector {
 *   .flatCornerFold(@foldSize,@color,@bgcolor,bottomright,25%);
 * }

 * Github: https://github.com/juanbrujo/flatCornerFold.less
**/

@bgcolor: #ecf0f1;
@blue: #2980b9;
@red: #c0392b;
@green: #27ae60;
@purple: #8e44ad;
@orange: #f39c12;
@dark: #2c3e50;

// INIT MIXIN .flatCornerFold()
.flatCornerFoldBase(){
  position: relative;
  &:after,
  &:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
  }
}
// direction = bottomright
.flatCornerFold(@foldSize,@color,@bgcolor,@direction:bottomright,@intensity:25%) when (@direction = bottomright){
  .flatCornerFoldBase();
  &:after,
  &:before {
    bottom: 0;
  }
  &:after {
    right: 0;
    border-width: @foldSize @foldSize 0 0;
    border-color: lighten(@color,@intensity) @bgcolor transparent transparent;
  }
  &:before {
    right: @foldSize;
    border-width: 0 0 @foldSize @foldSize;
    border-color: transparent transparent darken(@color,@intensity) transparent;
  }
}
// direction =  topright
.flatCornerFold(@foldSize,@color,@bgcolor,@direction,@intensity:25%) when (@direction = topright){
  .flatCornerFoldBase();
  &:after,
  &:before {
    right: 0;
  }
  &:after {
    top: 0;
    border-width: @foldSize 0 0 @foldSize;
    border-color: @bgcolor transparent transparent lighten(@color,@intensity);
  }
  &:before {
    top: @foldSize;
    border-width: 0 @foldSize @foldSize 0;
    border-color: transparent darken(@color,@intensity) transparent transparent;
  }
}
// direction =  topleft
.flatCornerFold(@foldSize,@color,@bgcolor,@direction,@intensity:25%) when (@direction = topleft){
  .flatCornerFoldBase();
  &:after,
  &:before {
    left: 0;
  }
  &:after {
    top: 0;
    border-width: 0 0 @foldSize @foldSize;
    border-color: transparent transparent lighten(@color,@intensity) @bgcolor;
  }
  &:before {
    top: @foldSize;
    border-width: @foldSize @foldSize 0 0;
    border-color: darken(@color,@intensity) transparent transparent transparent;
  }
}
// direction = bottomleft
.flatCornerFold(@foldSize,@color,@bgcolor,@direction,@intensity:25%) when (@direction = bottomleft){
  .flatCornerFoldBase();
  &:after,
  &:before {
    bottom: 0;
  }
  &:after {
    left: 0;
    border-width: 0 @foldSize @foldSize 0;
border-color: transparent lighten(@color,@intensity) @bgcolor transparent;
  }
  &:before {
    left: @foldSize;
    border-width: @foldSize 0 0 @foldSize;
    border-color: transparent transparent transparent darken(@color,@intensity);
  }
}
// END MIXIN .flatCornerFold()

.shape {
  float: left;
  margin: 1rem;
  width: 10rem;
  height: 16rem;
  font-size: 2.4vmin;
  color: @bgcolor;
  display: flex;
  align-items: center;
  justify-content: center;
  
  &.blue {
    @color: @blue;
    @foldSize: 3rem;
    
    background-color: @color;
    text-shadow: darken(@color,25%) -2px 2px 0;
    .flatCornerFold(@foldSize,@color,@bgcolor,bottomright);
  }
  &.red {
    @color: @red;
    @foldSize: 1rem;
    
    background-color: @color;
    text-shadow: darken(@color,25%) -2px 2px 0;
    .flatCornerFold(@foldSize,@color,@bgcolor,bottomright);
  }
  &.green {
    @color: @green;
    
    background-color: @color;
    text-shadow: darken(@color,25%) -2px 2px 0;
    // Set to 0 or any other value from initial state
    .flatCornerFold(0,@color,@bgcolor,bottomright);
    // add transition to pseudo-elements
    &:after,
    &:before {
      transition: .3s;
    }
    // :hover set size to 5rem
    &:hover {
      .flatCornerFold(5rem,@color,@bgcolor,bottomright);
    }
  
  }
  // direction: topright
  &.purple {
    @color: @purple;
    @foldSize: 2rem;
    
    background-color: @color;
    text-shadow: darken(@color,25%) -2px 2px 0;
    .flatCornerFold(@foldSize,@color,@bgcolor,topright,10%);
  }
  // direction: topleft
  &.orange {
    @color: @orange;
    @foldSize: 2rem;
    
    background-color: @color;
    text-shadow: darken(@color,25%) -2px 2px 0;
    .flatCornerFold(@foldSize,@color,@bgcolor,topleft,40%);
  }
  // direction: bottomleft
  &.dark {
    @color: @dark;
    @foldSize: 2rem;
    
    background-color: @color;
    text-shadow: darken(@color,25%) -2px 2px 0;
    .flatCornerFold(@foldSize,@color,@bgcolor,bottomleft,5%);
  }
  
}


// GENERAL STYLE
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic);
html,body{height:100%;}
body {
  background-color: @bgcolor;
  font-family: 'Source Sans Pro', sans-serif;
}
a {
  display: block;
  clear: both;
  width: 90px;
  color: @purple;
  text-decoration: none;
  padding: .5rem 1rem;
  margin: 1rem;
  text-align: center;
  border: 2px solid @purple;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.