JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.outer {
  width: 100%;
  height: 300px
}
.background-triangle {
    bottom: 0;
    right: 0;
    height: 0;
    width: 0;
    border-right: 250px solid rgba(0,0,0,.1); /* half width */
    border-bottom: 150px solid rgba(0,0,0,.1);/*half height*/
    border-left: 250px solid transparent;/*half width*/
    border-top: 150px solid transparent; /* half height*/
}

.box-color {
  position: relative; 
  background-color: #6699cc;
}