JSFiddle - React, Tailwind, and code Playground

by Elena Shevchuk

HTML

<div class="one">
    <div class="two">text text</div>
</div>
<div class="b">text text</div>

CSS

.one {
    background: blue;
    margin-left: 50px;
    overflow: hidden;
    color: white;
    display: inline-block;
    -webkit-transform: rotate(-45deg) skew(20deg, 0) skew(0, 20deg);
    -moz-transform: rotate(-45deg) skew(20deg, 20deg);
    -ms-transform: rotate(-45deg) skew(20deg, 20deg);
    -o-transform: rotate(-45deg) skew(20deg, 20deg);
    transform: rotate(-45deg) skew(20deg, 20deg);
}
.two {
    width: 50px;
    height: 50px;
    background: linear-gradient(blue, yellow);
    -webkit-transform:skew(0, -20deg) skew(-20deg, 0) rotate(45deg);
}
.b {
    margin-left: 50px;
}