FDW - 1160219

Hacer un div con forma

HTML

<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>

SCSS

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);
  }
}