强⼤的CSS：实现平⾏四边形布局效果
如何实现下图所⽰的平⾏四边形布局效果？
⼀、skewX的局限
⼀提到平⾏四边形，条件反射般的就会想起CSS transform中的skew()/skewX()/skewY()⽅法，可以让元素斜切，从⽽实现平⾏四边形效果
HTML如下：
<div class="input-x">
<input class="input" placeholder="您的姓名">
</div>
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布局实现。
有想⼀起学习web前端，可以来⼀下我的前端学习秋秋：784783012 ，从最基础的HTML+CSS+JavaScript【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项⽬实战的学习资料都有整理好友都会在⾥⾯交流，分享⼀些学习的⽅法和需要注意的⼩细节，每天也会准时的讲⼀些前端的炫酷特效
⼆、CSS Shapes布局与三⾓
然⽽你就算熟悉了CSS Shapes布局的每⼀个CSS属性，这⾥的平⾏四边形布局效果你还不⼀定会实现得出来，因为需要借助⼀点逆向思维。
CSS Shapes实现平⾏四边形布局的关键不在于平⾏四边形本⾝，⽽在于左上⾓和右下⾓的两个三⾓形。
HTML结构如下：
<!-- 左三⾓ -->
css特效文字<div class="shape-left"></div>
<!-- 右三⾓ -->
<div class="shape-right"></div>
<content class="content">
...内容...
</content>
我们查看下布局盒⼦，可见端倪：
.shape-left元素左浮动同时设置shape-outside为倒三⾓，.shape-right元素右浮动同时设置shape-outside为正三⾓，此时，<content>元素⾥⾯的⽂字内容就⾃动在剩余空间环绕排版，形成平⾏四边形布局效果。
相关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相关代码写在这⾥ */
}
这样，⽼旧⼿机依然是布局良好的传统块状布局，⼤多数⼿机可以享⽤新式布局带来的美味。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。