CSS Foldrf Corner with Transparent

by Rakesh Vadnal

HTML

<div class="post-it-note">
  <p>This folded corner works on any colored background!</p>
</div>

CSS

.post-it-note {
    padding:2em;
    width:150px;
    font:normal 20px Arial;
    background: #c61ce0;
    position: relative;
    min-height: 10em;
    margin-top: 70px;
    color: #FFF;
}
.post-it-note::before ,
.post-it-note::after{
  content: "";
  position: absolute;
  top: -2em;}

.post-it-note::before {
    right: 0;
    border-width: 0 2em 2em 0;
    border-style: solid;
    border-color: #a51aba transparent;
}
.post-it-note::after {
    left: 0;
    right: 2em;
    border-width: 1em;
    border-style: solid;
    border-color: #c61ce0;
}