web前端入门到实战: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;
}
web前端开发学习Q-q-u-n: 767273102 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
然而,一开始的布局不仅后面的白色背景形成平行四边形,整段文字内容也按照平行四边形的格式进行了排版,如果文字内容也应用skewX
,所有文字内容就会表现为倾斜,如下所示:
我是一段文字内容,我应用了transform属性中的skewX,看看我现在的表现是怎样子的……
我们的预期应该是文字都是正立显示,而不是这样子的倾斜。我们可能第一反应是对里面的文字进行反向的skewX
,但那需要对每一行文字单独处理,或者对每一个字符单独进行处理,成本有些高,不太实际。
这就是skewX
方法的局限,那有没有什么其他方法可以实现平行四边形的布局效果呢?有,可以借助CSS Shapes布局实现。
对web前端这门技术感兴趣的小伙伴可以加入到我们的学习圈来,工作第六个年头了,与大家分享一些学习方法,实战开发需要注意的细节。767-273-102 秋裙。从零基础开始怎么样学好前端。都是一群有梦想的人,我们可能在不同的城市,但我们会一起结伴同行前端前端前端
二、CSS Shapes布局与三角
然而你就算熟悉了CSS Shapes布局的每一个CSS属性,这里的平行四边形布局效果你还不一定会实现得出来,因为需要借助一点逆向思维。
CSS Shapes实现平行四边形布局的关键不在于平行四边形本身,而在于左上角和右下角的两个三角形。
HTML结构如下:
<!-- 左三角 -->
<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;
}
web前端开发学习Q-q-u-n: 767273102 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
效果即达成。
实现代码很简单,关键是思路。
三、平行四边形布局与实战
不规则形状的广告更能引起用户的注意力,从而提高广告点击率。
于是对于平行四边形布局,左上角和右下角的三角空缺正好可以用来放两个三角形广告,既充分利用空间,又有高收益。
前端开发通常与公司的业务收入直接关联不大,但是这里却不一样,如果你实现的新颖的布局效果能够大幅提高公司的收入,证明了你在这一块的价值,相信对你的绩效会很不错,可以在项目中试一试。
然而实际开发的时候,展示的文字内容有多有少,走平行四边形并不合适,因为会导致三角很小,或者右下角的三角位置无法确定的问题,因此,推荐实现的布局形状是下图这样子的。
四、结束语
以后遇到不规则形状布局,要有条件反射般的思维——CSS Shapes布局。
CSS Shapes布局兼容性已经相当不错了,移动端可以放心使用。为了避免污染极少部分老旧手机,我们可以这么处理:
@supports (shape-outside: none) {/* CSS Shapes相关代码写在这里 */
}
web前端开发学习Q-q-u-n: 767273102 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
这样,老旧手机依然是布局良好的传统块状布局,大多数手机可以享用新式布局带来的美味。
web前端入门到实战:CSS实现平行四边形布局效果相关推荐
- web前端入门到实战:以轮播效果为案例谈如何写优质代码
作为程序员大家在写代码时谈的最多的就是代码的拓展性.复用性.本文就以大家熟悉的轮播效果为案例,讲一讲写优质代码的思路和实践. 文章分三个步骤.第一步,实现基本功能:第二步,考虑到代码的封装性和复用性: ...
- html前端页面的基本骨架是,web前端入门到实战:css实现的骨架屏方案
web前端入门到实战:css实现的骨架屏方案 发布时间:2020-08-04 01:32:03 来源:51CTO 阅读:152 作者:前端向南 优点 简单,不需要工程,不用puppeteer生成骨架d ...
- 转圈加载html,web前端入门到实战:纯CSS实现加载转圈样式
web前端入门到实战:纯CSS实现加载转圈样式 发布时间:2020-05-27 18:11:33 来源:51CTO 阅读:134 作者:前端向南 不同的项目中对于等待加载时转圈圈的样式是不同的,有的是 ...
- web前端入门到实战:CSS新属性实现特殊的图片显示效果
1 概述 1.1 前言 使用一个或多个图像相关的CSS属性(background-blend-mode, mix-blend-mode, or filter)可以实现许多特殊的图片显示效果,共列举了2 ...
- html中怎么做彩虹,web前端入门到实战:纯CSS画动态彩虹
效果 效果图如下 实现思路 使用box-shadow画赤橙黄绿蓝靛紫7个弧形,拼接在一起 after伪元素写投影样式 彩虹和投影都有动画 dom结构 用两个嵌套的div容器,父容器来控制图标显示的位置 ...
- web前端入门到实战:CSS颜色、背景和剪切
颜色 CSS 中可以改变文字的颜色还有元素的背景颜色.可以用颜色关键字来定义颜色,如red,但是这些颜色关键字并不常用. transparent transparent可以让文字或背景变的完全透明的颜 ...
- web前端入门到实战:css中border-style 属性
border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式.只有当这个值不是 none 时边框才可能出现. 例子 1 border-style:dotted solid d ...
- web前端入门到实战:CSS动画之旋转魔方轮播
下面我将一步一步详解如何利用纯CSS实现一个旋转魔方轮播的效果. 总的来说我们需要实现以下两个主要功能: 构建一个能够旋转的立方体 让立方体拥有基本轮播所具有的特性 但在完成以上两点之前我们需要再次了 ...
- web前端入门到实战:CSS鼠标悬浮图片模糊切换效果
分享一段代码实例,它实现了图片的模糊效果. 默认状态下,图片是模糊的,当鼠标悬浮那么图片会恢复正常状态. 代码实例如下: <!doctype html> <html> < ...
最新文章
- 全连接条件随机场_最新:通沪铁路一期连接上海虹桥站和上海站,二期连接浦东机场和上海东站...
- Java学习之while语句
- 什么是分布式计算系统?—Vecloud微云
- 菜鸟要做架构师(二)——java性能优化之for循环
- 018:Django商城部署和数据库读写分离
- tomcat顶层架构
- 关于项目对表单校验的需求
- 封装mysql数据库_快速掌握 Mysql数据库对文件操作的封装
- 【渝粤题库】 陕西师范大学 202331 证券投资学 作业(专升本)
- Shell命令-线上查询及帮助之man、help
- postgresql null 值 不受查询条件约束
- linux内核中等待队列(wait_event,wake_up...)
- axure文本框添加水印_Axure教程:限制输入框输入字数
- vs2017安装勾选哪些_医学图像处理 VS2017配置ITK
- Java编写五线谱上的音符_五线谱音符(五线谱1234567表示图)
- Digicert EV证书签名后出现“证书对于请求用法无效”的解决方案
- Ceres-Solver
- 区块链快速入门(八)——以太坊
- 如果我们总是等待绝对的一切就绪,那我们将永远无法开始
- phpExcel导出excel文件浏览器一直不会出现下载框
热门文章
- php怎么把中文转,PHP如何将中文转为拼音?
- 四川锦城学院计算机专业好不,四川大学锦城学院计算机专业如何?
- Git SSH 方式无法 push 踩坑
- python进行独立样本t检验
- 配对t检验的应用条件是什么_配对t检验的适用条件,独立样本T检验、配对T检...
- ROS学习笔记02、ROS使用C++、Python来实现HelloWorld
- SRE(运维工程师)成长路上的十本书籍推荐
- Openstack中用keypair生成和访问虚机的方法
- soul群聊派对显示服务器异常,Soul群聊派对玩法攻略
- 微信小程序(组件:路由、表单、媒体、自定义组件,插槽、组件通讯、侦听器、生命周期)