HTML CSS examples for CSS Widget:Shape
create a price tag shape in CSS and HTML
<html lang="en"> <head> <title>Lorem ipsum dolor sit amet, con</title> <style> body {<!-- w w w .j ava 2s.c o m--> font-family:'Helvetica Neue', Helvetica, sans-serirf; } .price-tag { background:Chartreuse; border-radius:6px 0 0 6px; color:yellow; cursor:pointer; display:inline-block; font-size:0.876rem; height:31px; line-height:31px; margin-right:2rem; padding:0 0.667rem; position:relative; text-align:center; } .price-tag:after { background:inherit; border-radius:6px; display:block; content:""; height:25px; position:absolute; right:-24px; top:-3px; transform-origin:top left; transform:rotate(46deg); width:25px; z-index:-2; } .price-tag:hover { background:blue; } </style> </head> <body translate="no"> <div class="price-tag"> Lorem ipsum </div> <div class="price-tag"> Lorem i </div> <div class="price-tag"> Lorem ips </div> </body> </html>