css 平行四边形 梯形 组合_css3实现平行四边形框效果

利用CSS3可以不依赖图片资源就能制作出各式各样的形状、图形和动画。

平行四边形也是一种常常出现在网页上的表现形式，使用CSS3可以制作出各种平行四边形，平行四边形的文本、图片甚至是动画。

CSS3如何制作平行四边形？

使用CSS3 transform的skew属性可以将一个矩形变为非90度直角的平行四边形。

如下代码所示，是一个简单的平行四边形，使用skew属性为这个平行四边形向左倾斜30度。

注意，transform的变形是默认已元素的中心位置来进行，倾斜、旋转等变形的。

设置transform-origin能改变形的基准点，下例是将左上角设为基准点，否则会由于从中心点倾斜导致平行四边形向左偏移。

.parallelogram-simple{

width: 200px;

height: 100px;

transform-origin: 0 0;

transform: skew(30deg);

background: rgb(0,192,165);

}

CSS3制作包含图片和文字的的平行四边形

如下图，是一个包含有文字和图片的平行四边形，上半部分是图片，下半部分是文字描述。

在发生transform的skew变形后，里面的图片和文字也会发生相同的倾斜角度，

在此基础上再将平行四边形里面的图片和文字向相反的方向倾斜相同的角度，就可使他们恢复在正常显示的效果。

通过设置平行四边形的overflow值为overflow，可以使图片只显示平行四边形里面的内容&