强大的CSS：实现平行四边形布局效果
如何实现下图所示的平行四边形布局效果？
成都创新互联公司主要为客户提供服务项目涵盖了网页视觉设计、VI标志设计、成都全网营销、网站程序开发、HTML5响应式网站建设、手机网站开发、微商城、网站托管及成都网站改版、WEB系统开发、域名注册、国内外服务器租用、视频、平面设计、SEO优化排名。设计、前端、后端三个建站步骤的完善服务体系。一人跟踪测试的建站服务标准。已经为成都电动窗帘行业客户提供了网站设计服务。
一、skewX的局限
一提到平行四边形，条件反射般的就会想起CSS
transform
中的
skew()
/
skewX()
/
skewY()
方法，可以让元素斜切，从而实现平行四边形效果
HTML如下：
CSS如下，形状的关键就是下面红色高亮的
transform:skewX(-10deg)
：
.input-x {
display: inline-block;
position: relative;
z-index: 0;
}
.input-x::before {
content: '';
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
border: 2px solid #ddd;
background-color: #fff;
border-radius: 4px;
transform: skewX(-10deg);
z-index: -1;
}
.input {
display: block;
padding: 8px 10px;
border: 0; background: none;
}
然而，一开始的布局不仅后面的白色背景形成平行四边形，整段文字内容也按照平行四边形的格式进行了排版，如果文字内容也应用
skewX
，所有文字内容就会表现为倾斜，如下所示：
我是一段文字内容，我应用了transform属性中的skewX，看看我现在的表现是怎样子的……
我们的预期应该是文字都是正立显示，而不是这样子的倾斜。我们可能第一反应是对里面的文字进行反向的
skewX
，但那需要对每一行文字单独处理，或者对每一个字符单独进行处理，成本有些高，不太实际。
这就是
skewX
方法的局限，那有没有什么其他方法可以实现平行四边形的布局效果呢？有，可以借助CSS Shapes布局实现。
二、CSS Shapes布局与三角
然而你就算熟悉了CSS Shapes布局的每一个CSS属性，这里的平行四边形布局效果你还不一定会实现得出来，因为需要借助一点逆向思维。
CSS Shapes实现平行四边形布局的关键不在于平行四边形本身，而在于左上角和右下角的两个三角形。
HTML结构如下：
...内容...
我们查看下布局盒子，可见端倪：
.shape-left
元素左浮动同时设置
shape-outside
为倒三角，
.shape-right
元素右浮动同时设置
shape-outside
为正三角，此时，
元素里面的文字内容就自动在剩余空间环绕排版，形成平行四边形布局效果。
相关CSS代码如下：
.shape-left {
float: left;
width: 200px; height: 500px;
/* 倒三角 */
shape-outside: polygon(0 0, 100% 0, 0% 100%);
}
.shape-right {
float: right;
width: 200px; height: 500px;
/* 正三角 */
shape-outside: polygon(100% 0, 100% 100%, 0 100%);
}
.content {
display: block;
}
效果即达成。
实现代码很简单，关键是思路。
三、平行四边形布局与实战
不规则形状的广告更能引起用户的注意力，从而提高广告点击率。
于是对于平行四边形布局，左上角和右下角的三角空缺正好可以用来放两个三角形广告，既充分利用空间，又有高收益。
前端开发通常与公司的业务收入直接关联不大，但是这里却不一样，如果你实现的新颖的布局效果能够大幅提高公司的收入，证明了你在这一块的价值，相信对你的绩效会很不错，可以在项目中试一试。
然而实际开发的时候，展示的文字内容有多有少，走平行四边形并不合适，因为会导致三角很小，或者右下角的三角位置无法确定的问题，因此，推荐实现的布局形状是下图这样子的。
四、结束语
以后遇到不规则形状布局，要有条件反射般的思维——CSS Shapes布局。
CSS Shapes布局兼容性已经相当不错了，移动端可以放心使用。为了避免污染极少部分老旧手机，我们可以这么处理：
@supports (shape-outside: none) {
/* CSS Shapes相关代码写在这里 */
}
这样，老旧手机依然是布局良好的传统块状布局，大多数手机可以享用新式布局带来的美味。
自己是一个五年的前端工程师,希望本文对你有帮助！
这里推荐一下我的前端学习交流扣qun：731771211 ，里面都是学习前端的，如果你想制作酷炫的网页，想学习编程。自己整理了一份2019最全面前端学习资料，从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴，每天分享技术
网站名称：强大的CSS：实现平行四边形布局效果
文章位置：http://cdxtjz.cn/article/gjegeo.html
