Ecommerce product block ribbon with css
HTML Part <div class="block"> <div class="tiled_arrow"> <span class="onsale">sale !</span> </div> <h2>CSS Zilla</h2> </div> CSS Part .block { width:200px; float:left; height:200px; background:#333; position:relative; margin:50px; text-align:center; color:#fff; font-size:15px; font-family:Arial, Helvetica, sans-serif;} .tiled_arrow { position:absolute; overflow:hidden; right:-6px; top:-6px; white-space:nowrap; width:100px; height:100px;} .tiled_arrow:before { border-bottom-color:rgb(201, 167, 115) !important; border:8px solid rgba(0, 0, 0, 0); content:""; position:absolute; left:15px; top:-10px;} .tiled_arrow:after { border-bottom-color:rgb(201, 167, 115) !important; border:8px solid rgba(0, 0, 0, 0); content:""; position:absolute; top:70px; right:-10px; transform:rotate(90deg);} .onsale {background-image: none; border-radius: 0; box-shadow: none; font-weight: n...