CSS3实现平行四边形处理,skew中的文字倾斜处理

纯CSS3实现平行四边形,且不影响内部的文字倾斜。

效果如图:


效果图实现完整代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
</head>
<body>
<style>
#skew{
transform:skew(-30deg);
-ms-transform:skew(-30deg); /* IE 9 */
-moz-transform:skew(-30deg); /* Firefox */
-webkit-transform:skew(-30deg); /* Safari and Chrome */
-o-transform:skew(-30deg); /* Opera */
background: #FF6600;
width: 100px;
height: 50px;
display: block;
margin: 30px auto;
text-align: center;
}
#skew span{
transform:skew(30deg);
-ms-transform:skew(30deg); /* IE 9 */
-moz-transform:skew(30deg); /* Firefox */
-webkit-transform:skew(30deg); /* Safari and Chrome */
-o-transform:skew(30deg); /* Opera */
display: block;
height: 50px;
line-height: 50px;
color: #fff;
}
</style>
<div id="skew">
<span>平行四边形</span>
</div>
</body>
</html>

关键点解析:

transform:skewX(angle)

定义沿着 X 轴的 2D 倾斜转换。 

关键点:通过CSS3的新属性skew对div进行X轴的30度倾斜,这样便能实现div的平行四边形。进行到这里你会发现div中的所有元素都发生的倾斜,其中自然也包含了文字,那么这时我们要如何将里面倾斜的文字回正呢?

同样的道理,既然父级进行了正方向的倾斜,那么子元素是不是进行相同角度的负方向倾斜是否就正常了呢?

六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!