<a href="#"><div class="file orange"></></div></a> <a href="#"><div class="file blue">js</div></a> <a href="#"><div class="file red">rb</div></a> <a href="#"><div class="file yellow">py</div></a> <a href="#"><div class="file purple"><?></div></a>
.file:before{ content: ""; position: absolute; top: 0; right: 0; border-width: 0 32px 32px 0; border-style: solid; border-color:#888 #fff; transition: border 0.2s; } .file{ display: inline-block; position: relative; background: #b0b0b0; width: 100px; height: 150px; padding: 20px; margin: 10px; border-radius: 5px; color: #fff; font-size: 64px; line-height: 160px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; text-align: center; transition: transform 0.2s; } .file:hover:before{ border-width: 0; } .file:hover{ transform: scale(1.05); } .file:hover:active{ transform: scale(0.95); } .orange{background:#ff7461;}.orange:before{border-color:#c65b4b #fff;} .red{background:#ff6161;}.red:before{border-color:#c64b4b #fff;} .yellow{background:#f4cf77;}.yellow:before{border-color:#cdad60 #fff;} .blue{background:#8cc8ec;}.blue:before{border-color:#75a8c3 #fff;} .purple{background:#b094de;font-size: 50px;}.purple:before{border-color:#8a75ad #fff;}