css 平行四边形梯形组合_CSS实现平行四边形布局

如何实现下图所示的平行四边形布局效果？

一、skewX的局限

一提到平行四边形，条件反射般的就会想起CSS transform中的skew()/skewX()/skewY()方法，可以让元素斜切，从而实现平行四边形效果

然而，一开始的布局不仅后面的白色背景形成平行四边形，整段文字内容也按照平行四边形的格式进行了排版，如果文字内容也应用skewX，所有文字内容就会表现为倾斜，如下所示：

我是一段文字内容，我应用了transform属性中的skewX，看看我现在的表现是怎样子的……

我们的预期应该是文字都是正立显示，而不是这样子的倾斜。我们可能第一反应是对里面的文字进行反向的skewX，但那需要对每一行文字单独处理，或者对每一个字符单独进行处理，成本有些高，不太实际。

这就是skewX方法的局限，那有没有什么其他方法可以实现平行四边形的布局效果呢？有，可以借助CSS Shapes布局实现。

二、CSS Shapes布局与三角

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

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

HTML结构如下：

内容内容内容内容内容内容内容内容内容内容内

CSS代码如下：

.shape-left{

float:left;

width:100px;height:200px;

shape-outside:polygon(0 0,100% 0,0 100%);

}

.shape-right{

float:right;

width:100px;height:200px;

shape-outside:polygon(100% 0,100% 100%,0 100%);

}

.content{

display:block;

}

.content::after{

content:'';

position:absolute;

left:40px;right:40px;

top:0;bottom:80px;

background:#987;

transform:skewX(-20deg);

z-index:-1;

}

实现代码很简单，关键是思路。

效果：

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

不规则形状的广告更能引起用户的注意力，从而提高广告点击率。

于是对于平行四边形布局，左上角和右下角的三角空缺正好可以用来放两个三角形广告，既充分利用空间，又有高收益。

前端开发通常与公司的业务收入直接关联不大，但是这里却不一样，如果你实现的新颖的布局效果能够大幅提高公司的收入，证明了你在这一块的价值，相信对你的绩效会很不错，可以在项目中试一试。

然而实际开发的时候，展示的文字内容有多有少，走平行四边形并不合适，因为会导致三角很小，或者右下角的三角位置无法确定的问题，因此，推荐实现的布局形状是下图这样子的。

css 平行四边形梯形组合_CSS实现平行四边形布局相关推荐

css 平行四边形梯形组合_微课|人教版五年级数学上册6.4组合图形的面积（P99）...
|点击题目下方蓝字一键关注小学生知识库| 视频微课在公众号菜单"爱学小学",打开小程序 "爱学中小学",免费观看人教版数学教学视频. 您也可以在这里搜一搜, ...
Java学习-14 CSS与CSS3美化页面及网页布局
Java学习-14 CSS与CSS3美化页面及网页布局 1. CSS简介什么是CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示控制 HTML 元素, ...
Android 手机卫士--自定义组合控件构件布局结构
由于设置中心条目中的布局都很类似,所以可以考虑使用自定义组合控件来简化实现本文地址:http://www.cnblogs.com/wuyudong/p/5909043.html,转载请注明源地址. ...
css元素与浏览器边框,别具光芒CSS属性、浏览器兼容与网页布局
别具光芒CSS属性.浏览器兼容与网页布局语音编辑锁定讨论上传视频上传视频 <别具光芒CSS属性.浏览器兼容与网页布局>是2008年人民邮电出版社出版的图书.该书结合大量范例与实 ...
[css] 你是如何规划响应式布局的？
[css] 你是如何规划响应式布局的? 从项目角度来讲, PC 和 Mobile 是一个项目还是两个项目:从方法流派来讲, 有栅栏布局,固定 viewport,使用 rem/pt/vw 单位,使用定位 ...
CSS实现固定宽高比响应式布局（附实例分析）
更多文章可关注我的个人博客:https://seven777777.github.io/myblog/ 在日常开发过程中,有一些前端业务场景可能需要让元素在尺寸变化的同时,保证宽高比不变,所以在此记录 ...
CSS设计指南---字体和文本的布局
CSS设计指南-字体和文本的布局教材:CSS设计指南字体与字体样式相关的6 个属性: font-family (可继承) font-size (可继承) font-style font-weig ...
HTML怎么建立两行四列的li,关于CSS如何实现多行多列布局的方法
这篇文章主要介绍了CSS实现多行多列的布局的实例代码,需要的朋友可以参考下 1.两列多行: HTML: box1:实现两列多行布局 111 222 333 CSS: .box1 { width: 50 ...
html css画五角星,css画梯形，css画五角星， css画六角星，css画六边形
css画梯形,css画五角星, css画六角星 ,css画六边形 css画梯形 .triangle { border-bottom: 100px solid #F36823; border-left: ...
梯形面积php,CSS实现梯形标签页
在web设计中,梯形标签页是很常见的一种形式,但是梯形又是一种很难实现的样式,下面小编给大家分享使用CSS实现梯形标签页的代码,需要的朋友参考下吧在web设计中,梯形标签页是很常见的一种形式,但是梯 ...

css 平行四边形梯形组合_CSS实现平行四边形布局

css 平行四边形梯形组合_CSS实现平行四边形布局相关推荐

最新文章

热门文章

css 平行四边形 梯形 组合_CSS实现平行四边形布局

css 平行四边形 梯形 组合_CSS实现平行四边形布局相关推荐

最新文章

热门文章

css 平行四边形梯形组合_CSS实现平行四边形布局

css 平行四边形梯形组合_CSS实现平行四边形布局相关推荐