JSFiddle - React, Tailwind, and code Playground

by ydelmas

HTML

<div class="test">
    test
</div>

CSS

.test {
    width: 400px; height: 200px; background-color: #00F; color: #FFF;
    text-align: center; line-height: 200px;
    font-size: 50px;
    margin: 50px auto;
    position: relative;
}
.test:before {
    content: ' ';
    border-style: solid;
    border-width: 50px 50px 50px 100px;
    border-color: #F00 transparent transparent #FF0; /* à modifier: couleur de fond */
    position: absolute; top:0; left:0; z-index: 1; /* a modifier : -1 */
    width: 250px; height: 100px; background-color: transparent;
    transform-origin: 0 0;
    transform: matrix(1.1,0.1, 0.2,1.3, -40,-40);
}
.test:after {
    content: ' ';
    border-style: solid;
    border-width: 50px;
    border-color: transparent #0F0 #F0F transparent; /* à modifier: couleur de fond */
    position: absolute; top:0; left:0; z-index: 1; /* a modifier : -1 */
    width: 300px; height: 100px; background-color: transparent;
    transform-origin: 399px 199px;
    transform: matrix(1.05,-0.05, 0.1,1, 20,0);
}