用CSS画平行四边形

<div class="jx">我是一个平行四边形</div>

<style>

.jx{

　　//定义div的高度宽度

　　transform:skew(-20deg);//div jx倾斜了，但同时里面的文字也倾斜了

}

</style>

 

<div class="jx">

　　<div class="content">

　　　　我是一个平行四边形

　　</div>

</div>

<style>

.jx{

　　transform:skew(-20deg);

}

.content{

　　transform:skew(20deg);//文字把倾斜的角度再正过来

}

</style>

skew(x-angle,y-angle) 沿着X轴Y轴2D倾斜旋转

skewX(angle)沿着X轴2D倾斜旋转

skewY(angle)沿着Y轴2D倾斜旋转

效果见http://www.w3school.com.cn/cssref/pr_transform.asp

转载于:https://www.cnblogs.com/YangqinCao/p/5417143.html