<div class="wrapper"> <div class="box">CSS DEMO</div> <p><span>NIJILOG</span></p> </div>
.wrapper { position: relative; color: #fff; display: inline-block; padding: 5px; overflow: hidden; } .wrapper p { display: inline; } .wrapper p span { position: absolute; display: inline-block; right: -25px; box-shadow: 0px 0px 10px rgba(0,0,0,0.2), inset 0px 5px 30px rgba(255,255,255,0.2); text-align: center; top: 22px; background: #a00; border: 1px solid #faa; font: bold 13px 'Helvetiva Neue', Helvetica, Arial, sans-serif; width: 100px; padding: 4px 10px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); } .wrapper p:before { content: ""; width: 0; height: 0; position: absolute; top: -17px; right: 69px; z-index: -1; border: 17px solid; border-color: transparent transparent #662121 transparent; } .wrapper p:after { content: ""; width: 0; height: 0; position: absolute; top: 74px; z-index: -1; right: -10px; border: 17px solid; border-color: #662121 transparent transparent transparent; } .box{ width:150px; border:1px solid #dadada; background-color:#fff; font: bold 16px 'Helvetiva Neue', Helvetica, Arial, sans-serif; color: #333; padding: 3em 2em; text-align: center; -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1); box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1); } .box:before, .box:after { position: absolute; width: 40%; height: 10px; content: ' '; left: 12px; bottom: 12px; background: transparent; -webkit-transform: skew(-5deg) rotate(-5deg); -moz-transform: skew(-5deg) rotate(-5deg); -ms-transform: skew(-5deg) rotate(-5deg); -o-transform: skew(-5deg) rotate(-5deg); transform: skew(-5deg) rotate(-5deg); -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); z-index: -1; } .box:after { left: auto; right: 12px; -webkit-transform: skew(5deg) rotate(5deg); -moz-transform: skew(5deg) rotate(5deg); -ms-transform: skew(5deg) rotate(5deg); -o-transform: skew(5deg) rotate(5deg); transform: skew(5deg) rotate(5deg); }