强大的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 { 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：实现平行四边形布局效果

一、skewX的局限

二、CSS Shapes布局与三角

三、平行四边形布局与实战

四、结束语

其他资讯