JSFiddle - React, Tailwind, and code Playground

by Anton Fedoryan

HTML

<div class="picture">
  <div class="corner">
  
  </div>
</div>

CSS

html,
body
{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.picture
{
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: url('http://qiqru.org/media/npict/1503/original/oboi_yarkie_appetitnye_frukty__2090615.jpeg') no-repeat 50% 50%;
  background-size: cover;
}

.corner
{
  position: absolute;
  width: 0;
  height: 0;
  left: 0;
  bottom: 0;
  border-bottom: 20vh solid blue;
  border-right: 100vw solid transparent;
  border-left: 0 solid transparent;
}