JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <p>
        <span>triangle</span>
    </p>
</div>

CSS

div {
    height:100px;
    width:150px;
    border-bottom:solid;
    overflow:hidden;
}
div p {
    border:solid;
    -webkit-transform:rotate(45deg);
    -webkit-transform-origin:26px 95px;
    height:150%;
    text-align:
    
}
div p span {
    display:block;
     -webkit-transform:rotate(-45deg);
     -webkit-transform-origin:center ;
}