JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<div class="triangle"></div>

CSS

.triangle { 
height: 100px; 
width: 100px;
position:relative;
background: rgb(209,39,56);
background: -moz-linear-gradient(top,  rgba(209,39,56,1) 0%, rgba(122,23,38,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(209,39,56,1)), color-stop(100%,rgba(122,23,38,1))); /* Chrome,Safari4+ */
-webkit-linear-gradient(top,  rgba(209,39,56,1) 0%,rgba(122,23,38,1) 100%); /* 
-o-linear-gradient(top,  rgba(209,39,56,1) 0%,rgba(122,23,38,1) 100%); /* Opera 11.10+ */
-ms-linear-gradient(top,  rgba(209,39,56,1) 0%,rgba(122,23,38,1) 100%); /* IE10+ */
linear-gradient(top,  rgba(209,39,56,1) 0%,rgba(122,23,38,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d12738', endColorstr='#7a1726',GradientType=0 ); /* IE6-8 */
}

.triangle:after {
    -moz-transform: rotate(45deg);
    -ms-transform:rotate(45deg); /* Internet Explorer */
    -webkit-transform:rotate(45deg); /* Safari and Chrome */
    -o-transform:rotate(45deg); /* Opera */
    background: none repeat scroll 0 0 white;
    content: "";
    height: 159px;
    left: 21px;
    position: absolute;
    top: 100px;
    width: 100px;

}