JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent" style="transform:unset;">
    <div class="children" style="transform:unset;">原来形状</div>
</div>
<div class="parent" style="transform:rotateZ(-30deg);">
    <div class="children" style="transform:rotateZ(30deg);">可以还原</div>
</div>
<div class="parent" style="transform:skewX(30deg);">
    <div class="children" style="transform:skewX(-30deg);">可以还原</div>
</div>
<div class="parent">
    <div class="children">无法还原</div>
</div>

CSS

.parent {
    height: 173.2px;
    width: 200px;
    margin: 40px 80px;
    display: inline-block;
    background-color: rgba(0, 255, 255, 0.2);
    transform: rotateZ(-30deg) skewX(30deg);
}
.children {
    height: 200px;
    width: 173.2px;
    background-color: rgba(255, 0, 255, 0.2);
    transform: rotateZ(30deg) skewX(-30deg);
}