Box dogears via pseudos

by sanford

HTML

<div class="wrapper"><div class="content">Inside</div>Me</div>

CSS

body { padding: 40px; }


DIV.wrapper {
    height: 100px;
    width: 100px;
    border: none;
    border: 2px solid rgb(148,148,148);
    border: 2px solid rgba(148,148,148,.6);  

    position: relative;
    padding-left:16px;
    padding-top:16px;
    transition:all 420ms ease-in;
    -webkit-transition:all 420ms ease-in;
    ZZoverflow:hidden;
   
}
DIV.wrapper:before,DIV.wrapper:after {
    content: "";
    width: 0;
    height: 0;
    position:absolute;
    display:block;
    transition:all 420ms ease-in;
    -webkit-transition:all 420ms ease-in;

}
DIV.wrapper:before {
    border-left: 1.8em solid transparent !important;
    border-top: 1.8em solid rgb(124,10,124);
    border-top: 1.8em solid rgba(124,10,124,.2);
    right:-2px;
    top:-2px;
}

 DIV.wrapper:hover {
    border-color: rgb(124,10,124);
    border-color: rgba(124,10,124,.2);
}