<div class="wrapper"> <div class="ribbon-wrapper-green"> <div class="ribbon-green">★★★</div> </div> <h1>Sample Box</h1> <img src="http://www.wpthemegenerator.com/wp-content/uploads/2012/06/Image.jpg"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus consectetur dolor a porttitor. Curabitur id sem sed ante fringilla pulvinar et id lectus. Nullam justo ipsum, hendrerit ut commodo nec, pellentesque nec erat. Pellentesque pharetra. </p> <br /> <a href="http://www.designshock.com/"> DesignShock.com </a> </div>
body { background: #eee; font-size: 11px; font-size: 11px; font-family: 'Open Sans', sans-serif; color: #4A4A4A ; text-align: center } .wrapper { margin: 20px auto; width: 300px; height: 310px; background: white; padding: 10px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); box-shadow: 0px 0px 8px rgba(0,0,0,0.3); box-shadow: 0px 0px 8px rgba(0,0,0,0.3); position: relative; z-index: 90; } .ribbon-wrapper-green { width: 85px; height: 88px; overflow: hidden; position: absolute; top: -2px; right: -2px; } .ribbon-green { font-weight: bold; font-family: Sans-Serif; color: #333; font-size: 15px; text-align: center; text-shadow: white 0px 1px 0px; -ms-transform:rotate(45deg); -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); position: relative; padding: 7px 0 ; left: -5px; top: 13px; width: 120px; background: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); color:#6a6340; box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.3); } .ribbon-green:before, .ribbon-green:after { content: ""; /* Colour of the triangle. To flip the effect, use border-bottom. */ border-top: 3px solid #6e8900; border-left: 3px solid transparent; border-right: 3px solid transparent; position:absolute; bottom: -3px; /* +1 to compensate for the border */ } .ribbon-green:before { left: 0px; } .ribbon-green:after { right: 0px; } img { width: 100%; margin-top: 15px; } p{ margin-top: 15px; text-align: justify; } h1{ font-size: 20px; font-weight: bold; margin-top: 5px; text-shadow: 1px 1px 3px rgba(0,0,0,0.3); } a{ text-decoration: none; color: #EAEAEA !important; } a{ text-decoration: none; color: #4A4A4A !important; } a:hover{ text-decoration: underline; color: #6B6B6B !important ; }