<div class="figura"> <div> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt cum delectus necessitatibus nam a molestiae maiores quam provident laudantium error illum facilis maxime tenetur eum, similique, repudiandae, amet excepturi obcaecati. </div> </div> <div class="figura2"> <div> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt cum delectus necessitatibus nam a molestiae maiores quam provident laudantium error illum facilis maxime tenetur eum, similique, repudiandae, amet excepturi obcaecati. </div> </div>
body{background: #fff;} .figura, .figura2{ width: 300px; margin: 20px auto; overflow: hidden; >div{ background:green; border:2px blue solid; padding:20px 20px 100px; box-sizing:border-box; font:13px/1.3 arial,verdana,tahoma; color: #fff; position: relative; &:after{ content:''; display: block; position: absolute; background: #fff; height: 150px; width: 200%; bottom:-150px; left: 0; //opacity:0.8; transform:rotate(-15deg); transform-origin:0 50%; border:2px blue solid; } } } .figura2{ >div{ color: #fff; background: url(http://lorempixel.com/400/400/abstract); } }