[分享]css3把盒子写成平行四边形

CSS3提供了非常强大的样式技术，其中包括把盒子写成平行四边形。本文将介绍如何使用CSS3实现这个效果。

 .parallelogram {
        width: 200px;
        height: 100px;
        transform: skew(-20deg);
        background-color: #28a745;
    } 

首先，我们需要设置盒子的宽度和高度。在这里，我们将盒子的宽度设置为200像素，高度设置为100像素。

然后，我们需要使用CSS3的transform属性倾斜这个盒子，让它变成一个平行四边形。我们可以通过设置transform属性的skew()函数来完成这个操作。在这里，我们将盒子向左下角倾斜20度，并且保留纵向高度不变。

最后，我们可以给这个盒子加上背景色，使得它更加醒目。在这里，我们将盒子的背景色设置为绿色。

 <div class="parallelogram">
        <p>这是一个平行四边形盒子</p>
    </div> 

最后，我们将这个样式应用到一个div标签中，同时在盒子中加上一个段落标签，用于展示这个盒子的内容。

现在，我们就可以使用CSS3把盒子写成平行四边形了。如果需要更改倾斜角度或者背景颜色，只需要修改对应的CSS样式即可。