JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sqd">
  <div class="sqd-p">
    <div class="sqd-i">
      <img src="http://savepic.ru/8350936.jpg" alt="">
    </div>
  </div>
</div>

CSS

.sqd {
    width: 250px;
    height: 250px;
    padding: 5px;
    line-height: 250px;
    text-align: center;
    background-image: linear-gradient(45deg, #00b6f3, #bbebfb);
    transform: rotate(-45deg);
}
.sqd-p {
  background: #fff;
}

.sqd-i {
  transform: rotate(45deg);
}

div img {
      vertical-align: middle;
}