Thumbnails with bottom cutter

thumbnails with bottom cutter

by Mr_Vasu

HTML

<div class="thumnails">
  <ul class="thumbnails-list">
    <li>
      <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, quasi maiores expedita 
      </div>
    </li>
    <li>
      <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, quasi maiores expedita .
      </div>
    </li>
    <li>
      <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, quasi maiores expedita .
      </div>
    </li>
    <li>
      <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, quasi maiores expedita nulla molestiae labore necessitatibus, laboriosam repudiandae eum debitis natus quaerat iste recusandae aliquid saepe. Quas ipsum necessitatibus iste.
      </div>
    </li>
  </ul>

</div>

SCSS

.thumnails {
  background: #fff;
  padding: 10px;
  box-sizing:border-box;
  .thumbnails-list {
    margin:0 -5px;
    &::after{
      content:"";
      clear:both;
      display:block;
    }
    li {
     background: tomato;
     padding:10px 10px 40px 10px;
     float:left;
     width:30.33%;
     list-style:none;
     margin:10px 5px;
     position:relative;
     &::after{
       content:"";
       position:absolute;
       border-bottom:40px solid #fff;
       border-left:30px solid #ddd;
       display:block;
       height:0;
       width:0;
       bottom:0;
       right:0;
       
     }
    }
  }
}