JSFiddle - React, Tailwind, and code Playground

by Tarafder Ashek E Elahi

HTML

<div class="outer">
    <a href="/#">
        <div class="box-color" style="">
            <div class="background-triangle"></div>
        </div>
    </a>
</div>

CSS

.box-color {
  width: 100%;
  height: 300px;
  position: relative;
  background-color: #6699cc;
}

.background-triangle {
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  background: linear-gradient(to right bottom, transparent 50%, rgba(0, 0, 0, .1) 50%)
}