CSS：实现平行四边形布局效果

最新推荐文章于 2024-01-15 22:57:44 发布

ting2909

最新推荐文章于 2024-01-15 22:57:44 发布

阅读量374

点赞数

原文链接：https://blog.51cto.com/14458119/2430178

版权

一、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布局实现。

对web前端这门技术感兴趣的小伙伴可以加入到我们的学习圈来，正因为我不是211，985，只是个普通的本科生，英语不是特别好，数学不是特别好。所以我选择了前端。工作第六个年头了，我庆幸自己选择了这条路。767-273-102 秋裙。与大家分享一些学习方法，实战开发需要注意的细节。从零基础开始怎么样学好前端。都是一群有梦想的人，我们可能在不同的城市，但我们会一起结伴同行前端前端前端

二、CSS Shapes布局与三角
然而你就算熟悉了CSS Shapes布局的每一个CSS属性，这里的平行四边形布局效果你还不一定会实现得出来，因为需要借助一点逆向思维。

CSS Shapes实现平行四边形布局的关键不在于平行四边形本身，而在于左上角和右下角的两个三角形。

HTML结构如下：

...内容... 我们查看下布局盒子，可见端倪：

CSS：实现平行四边形布局效果

.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;
}
效果即达成。