HTML CSS examples for CSS Widget:Table
Markings in top left corner of a table element
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .wrapper {<!-- w w w .j a v a2s. c o m--> margin:51px auto; width:151px; height:151px; background:white; border-radius:11px; -webkit-box-shadow:0px 0px 9px Chartreuse; -moz-box-shadow:0px 0px 9px yellow; box-shadow:0px 0px 9px blue; position:relative; z-index:91; } .ribbon-wrapper-green { width:86px; height:89px; overflow:hidden; position:absolute; top:-4px; right:-4px; } .ribbon-green { font:bold 16px Sans-Serif; color:pink; text-align:center; text-shadow:OrangeRed 0px 2px 0px; -webkit-transform:rotate(46deg); -moz-transform:rotate(46deg); -ms-transform:rotate(46deg); -o-transform:rotate(46deg); position:relative; padding:8px 0; left:-6px; top:16px; width:121px; background-color:grey; background-image:-webkit-gradient(linear, left top, left bottom, from(BlueViolet), to(Chartreuse)); background-image:-webkit-linear-gradient(top, yellow, blue); background-image:-moz-linear-gradient(top, pink, OrangeRed); background-image:-ms-linear-gradient(top, grey, BlueViolet); background-image:-o-linear-gradient(top, Chartreuse, yellow); color:blue; -webkit-box-shadow:0px 0px 4px pink; -moz-box-shadow:0px 0px 4px OrangeRed; box-shadow:0px 0px 4px grey; } .ribbon-green:before, .ribbon-green:after { content:""; border-top:4px solid BlueViolet; border-left:4px solid Chartreuse; border-right:4px solid yellow; position:absolute; bottom:-4px; } .ribbon-green:before { left:0; } .ribbon-green:after { right:0; } </style> </head> <body> <table> <tbody> <tr> <td> <div class="wrapper" style="background-repeat: no-repeat;background-image: url('https://www.java2s.com/style/demo/InternetExplorer.png');"> <div class="ribbon-wrapper-green"> <div class="ribbon-green"> Lorem </div> </div> </div> </td> <td> <div class="wrapper" style="background-repeat: no-repeat;background-image: url('https://www.java2s.com/style/demo/InternetExplorer.png');"> <div class="ribbon-wrapper-green"> <div class="ribbon-green"> Lorem </div> </div> </div> </td> <td> <div class="wrapper" style="background-repeat: no-repeat;background-image: url('https://www.java2s.com/style/demo/InternetExplorer.png');"> <div class="ribbon-wrapper-green"> <div class="ribbon-green"> Lorem </div> </div> </div> </td> <td> <div class="wrapper" style="background-repeat: no-repeat;background-image: url('https://www.java2s.com/style/demo/InternetExplorer.png');"> <div class="ribbon-wrapper-green"> <div class="ribbon-green"> Lorem </div> </div> </div> </td> </tr> </tbody> </table> </body> </html>