CSS transform和SVG transform skew斜切对比示意实例页面

CSS代码：

svg, .svg {
    background-color: #f0f3f9;
}
.svg {
    width: 200px; height: 150px;
}
.rect {
    width: 120px; height: 90px;
    position: absolute;
    margin: 30px 0 0 30px;
    border-radius: 10px;
    background-color: #a0b3d6;
}
.skew {
    transform: skew(45deg, 0);
}
                

HTML代码：

<p><strong>CSS3控制的45度斜切</strong></p>
<div class="svg">
    <div class="rect rotate"></div>
</div>
<p><strong>SVG属性控制45度斜切</strong></p>
<svg width="200" height="150">
    <rect x="30" y="30" width="120" height="90" rx="10" ry="10" fill="#a0b3d6" transform="skew(45)"></rect>
</svg>
<p><strong>SVG属性控制25度+20度连续斜切</strong></p>
<svg width="200" height="150">
    <rect x="30" y="30" width="120" height="90" rx="10" ry="10" fill="#a0b3d6" transform="skewX(25) skewX(20)"></rect>
</svg>