JSFiddle - React, Tailwind, and code Playground

by Yandy Viera

HTML

<div class="blue"></div>

CSS

.blue{
    background: #1AA9C8;
    width: 200px;
    height: 100px;
    position: relative;
    margin: 25px auto;
}

.blue:before{
    content: '';
    position: absolute;
    right: calc(100% - 36px);
    top: 15px;
    background: firebrick;    
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    height: calc(100% / 1.41);
    width: 70.9px; /*here is my problem  because width depends on the parent's width and I don't know how to make it depends on the parent's height
}