<div class="wrap rounded"> <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: url(http://subtlepatterns.com/patterns/natural_paper.png) ; font-size: 11px; font-size: 11px; font-family: 'Open Sans', sans-serif; color: #EAEAEA; text-align: center; } .wrap{ position:relative; width:300px; height:310px; padding:1em 1em; margin:20px auto; background:#666666; overflow:hidden; } .wrap:before { content:""; position:absolute; top:0; right:0; border-width:0 16px 16px 0; border-style:solid; border-color:#fff #fff #658E15 #658E15; background:#4E4E4E; -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); display:block; width:0; /* Firefox 3.0 damage limitation */ } .wrap.rounded { -webkit-border-radius:5px 0 5px 5px; -moz-border-radius:5px 0 5px 5px; border-radius:5px 0 5px 5px; } .wrap.rounded:before { border-width:8px; border-color: #EBEAE6 #EBEAE6 transparent transparent; -webkit-border-bottom-left-radius:5px; -moz-border-radius:0 0 0 5px; border-radius:0 0 0 5px; } .wrap 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:hover{ text-decoration: underline; color: #fff !important ; }