matchaxnb/sticky.html

## sticky.html
<html>
  <body>
   <div class="sticky">
     <div class="sticky-inside">
       <p>My text goes here hey hey hey !<br />
          Whatever you may say</p>
       <div class="sticky-bottom">
       </div>
     </div><!-- inside -->
  </div><!-- sticky -->
  </body>
</html>

## sticky.scss
$sticky: #fefdca;
$stickydark: #7f7f66;
$sline: rgba(107,190,255, 1);

@mixin stickynote {
  @include background-image(linear-gradient(
    to bottom,
    $sticky,
    $sticky 40px,
    $sline 41px,
    $sline 42px,
    $sticky 43px,
    $sticky 80px,
    $sline 81px,
    $sline 82px,
    $sticky 83px,
    $sticky 120px,
    $sline 121px,
    $sline 122px,
    $sticky 123px,
    $sticky 160px,
    $sline 161px,
    $sline 162px,
    $sticky 163px,
    $sticky 200px,
    $sline 201px,
    $sline 202px,
    $sticky 203px,
    $sticky 240px,
    $sline 241px,
    $sline 242px,
    $sticky 243px,
    $sticky 280px,
    $sline 281px,
    $sline 282px,
    $sticky 283px,
    $sticky 320px,
    $sline 321px,
    $sline 322px,
    $sticky 323px,
    $sticky 360px,
    $sline 361px,
    $sline 362px,
    $sticky 363px,
    $sticky 400px,
    $sline 401px,
    $sline 402px,
    $sticky 403px,
    $sticky 440px,
    $sline 441px,
    $sline 442px,
    $sticky 443px,
    $sticky 480px,
    $sline 481px,
    $sline 482px,
    $sticky 483px,
    $sticky 100%
    ));
  @include box-shadow(0 30px 30px rgba(0,0,0,0.6));
}

.sticky {
  width:320px;
  height:320px;
  @include stickynote;
  .sticky-inside {
    position:relative;
    p {
      padding:0.5em;
      padding-top: 1.5em;
      font-size:25pt;
      line-height: 1.2em;
      font-family: 'Indie Flower', cursive;
      color:#333;
    }
    .sticky-bottom {
        height:37px;
        width:37px;
        right:0px;
        bottom:0px;
        position:absolute;
        z-index:2;
        background-color: rgba(0,0,0,0.3);
        @include background-image(linear-gradient(135deg, $stickydark,
          $stickydark 50%, $sticky 70%, $sticky 88%, white 88%, white 100%));
        @include box-shadow(-6px -8px 10px 0px rgba(50, 50, 50, 0.25));
    }
  }
}
	<html>
	<body>
	<div class="sticky">
	<div class="sticky-inside">
	<p>My text goes here hey hey hey !<br />
	Whatever you may say</p>
	<div class="sticky-bottom">
	</div>
	</div><!-- inside -->
	</div><!-- sticky -->
	</body>
	</html>
	$sticky: #fefdca;
	$stickydark: #7f7f66;
	$sline: rgba(107,190,255, 1);

	@mixin stickynote {
	@include background-image(linear-gradient(
	to bottom,
	$sticky,
	$sticky 40px,
	$sline 41px,
	$sline 42px,
	$sticky 43px,
	$sticky 80px,
	$sline 81px,
	$sline 82px,
	$sticky 83px,
	$sticky 120px,
	$sline 121px,
	$sline 122px,
	$sticky 123px,
	$sticky 160px,
	$sline 161px,
	$sline 162px,
	$sticky 163px,
	$sticky 200px,
	$sline 201px,
	$sline 202px,
	$sticky 203px,
	$sticky 240px,
	$sline 241px,
	$sline 242px,
	$sticky 243px,
	$sticky 280px,
	$sline 281px,
	$sline 282px,
	$sticky 283px,
	$sticky 320px,
	$sline 321px,
	$sline 322px,
	$sticky 323px,
	$sticky 360px,
	$sline 361px,
	$sline 362px,
	$sticky 363px,
	$sticky 400px,
	$sline 401px,
	$sline 402px,
	$sticky 403px,
	$sticky 440px,
	$sline 441px,
	$sline 442px,
	$sticky 443px,
	$sticky 480px,
	$sline 481px,
	$sline 482px,
	$sticky 483px,
	$sticky 100%
	));
	@include box-shadow(0 30px 30px rgba(0,0,0,0.6));
	}

	.sticky {
	width:320px;
	height:320px;
	@include stickynote;
	.sticky-inside {
	position:relative;
	p {
	padding:0.5em;
	padding-top: 1.5em;
	font-size:25pt;
	line-height: 1.2em;
	font-family: 'Indie Flower', cursive;
	color:#333;
	}
	.sticky-bottom {
	height:37px;
	width:37px;
	right:0px;
	bottom:0px;
	position:absolute;
	z-index:2;
	background-color: rgba(0,0,0,0.3);
	@include background-image(linear-gradient(135deg, $stickydark,
	$stickydark 50%, $sticky 70%, $sticky 88%, white 88%, white 100%));
	@include box-shadow(-6px -8px 10px 0px rgba(50, 50, 50, 0.25));
	}
	}
	}