JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<div class="thumb">
  <img src="http://lorempixel.com/400/400" alt="">
</div>

SCSS

.thumb {
  display: inline-block;
  position: relative;
  overflow: hidden;
  line-height: 0;
  
  &:before,
  &:after {
    display: block;
    width: 999%;
    height: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%) rotate(45deg);
    content: '';
    background: #333;
  }
  
  &:after {
    transform: translate(-50%) rotate(-45deg);
  }
}