clip-path 教程:使用 CSS 中的 clip-path 轻松实现多边形
作为一个前端开发,一个主要的工作就是来实现设计师设计的UI界面。而在UI界面中,各种各样的形状元素应用则是随处可见,比如三角形:
以前碰到这种形状的时候,会使用各种黑科技的技巧,比如使用CSS中的border属性来模拟实现这类型的三角形就是一种主流的实现方法。
虽然种实现方法看起来很灵巧,但是为来实现这一个小小的三角形,就不得不添加无意义的标签,而且使用起来非常的笨拙不是很灵活。在远古的前端开发时代,一般都是直接切图来实现的。
不过,今时不同往日,有了CSS3中clip-path这个属性,我们就可以轻松的使用几行代码实现各种不同的形状。简单的说它就是利用遮罩的方法,连接坐标绘制遮罩区域,就可以做出许多不同的形状,让底色或者是地图按遮罩的区域显示出来。
把这个属性玩的出神入化的是这个网站http://species-in-pieces.com/,可以打开感受一下。
基本的介绍完了,正式开车。
首先介绍一个clip-path的神器,http://bennettfeely.com/clippy/,这个网站是专门用来生成各种形状的,并且直接生成clip-path的代码,可以直接在上面任意的拖拉修改:
可以看到在下面的代码区域,实时生成了对应的CSS代码,非常的方便。
下面就通过一个最简单的三角形来体验下使用clip-path实现多边形是多么的方便。
先准备基本的HTML代码:
<div class="triangles"></div>
css代码:
width: 200px;
height: 200px;
background-color:red;
上面的代码就是一个正常的矩形:
接下来直接在http://bennettfeely.com/clippy/这个网站上拉出一个三角形的然后复制对应的CSS代码:
-webkit-clip-path: polygon(48% 0, 0% 100%, 100% 100%);
clip-path: polygon(48% 0, 0% 100%, 100% 100%);
把这两行代码放入到上面的CSS代码中:
.triangles {
width: 200px;
height: 200px;
background-color:red;
-webkit-clip-path: polygon(48% 0, 0% 100%, 100% 100%);
clip-path: polygon(48% 0, 0% 100%, 100% 100%);
}
就是这么简单,一个三角形就实现了。
至于浏览器支持度,现在在移动端Android4.4以上和IOS9以上的系统是可以放心大胆的使用了。
clip-path的详细知识可以去下面两个地址看看。
clip-path 教程:使用 CSS 中的 clip-path 轻松实现多边形的更多相关文章
- CSS中的剪裁和遮罩
剪裁和遮罩都是用来隐藏元素的一些部分.显示其他部分的.当然了,这两者还是有区别的.区别主要在于这几方面:他们能做的东西,不同的语法,涉及到的不同技术,是新的还是旧的,以及浏览器支持的差异. 但不幸的是 ...
- html5中的clip
定义和用法 clip() 方法从原始画布中剪切任意形状和尺寸. 提示:一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内(不能访问画布上的其他区域).您也可以在使用 clip() 方法前通 ...
- css中使用if条件在各大浏览器(IE6\IE7\IE8)中hack方法解决教程
一个滚动代码,其他浏览器都滚的好好的,就IE出现错误,DIV+CSS if条件hack,这里DIVCSS5为大家介绍针对各大浏览器(IE6\IE7\IE8)中使用if条件hack方法教程,DIV CS ...
- css中的em 简单教程 -- 转
先附上原作的地址: https://www.w3cplus.com/css/px-to-em 习惯性的复制一遍~~~~ -------------------------------我是分界线---- ...
- 用APICloud开发iOS App Clip详细教程
App Clip是苹果公司在WWDC20开发者大会上发布的新功能,用户可以只访问应用程序的一小部分,而无需下载整个应用,被称为苹果小程序.本文主要介绍如何通过APICloud开发App Clip. 一 ...
- 《手把手教你》系列技巧篇(十八)-java+ selenium自动化测试-元素定位大法之By css中卷(详细教程)
1.简介 按计划今天宏哥继续讲解倚天剑-css的定位元素的方法:ID属性值定位.其他属性值定位和使用属性值的一部分定位(这个类似xpath的模糊定位). 2.常用定位方法(8种) (1)id(2)na ...
- css中clip-path属性的运用
今天看到一位同学的需求,要在一个div中加一个小尖尖,对话时发的图片,旁边这个三角是怎么实现与图片的颜色一致,效果如下: 当然,解决这个问题有各种奇淫巧技,现在我们来看一个css属性clip-path ...
- css中的段落样式及背景
一.段落样式 css中关于段落的样式主要有行高,缩进,段落对齐,文字间距,文字溢出,段落换行等.它们的具体语法如下: line-height : normal | length text-indent ...
- css中的text-overflow
css中的text-overflow HTML中: <body><div class="clip">此处中多余的文字直接被切掉,不显示</div> ...
随机推荐
- 洛谷P3088 挤奶牛
传送门啦 这个题也是一个单调队列来优化的 $ dp $ ,我们考虑这个题,这个题让我们求出有多少奶牛会觉得拥挤,如果我们还像琪露诺那个题那样单纯用一次单调队列肯定是不行的,因为牛觉不觉得拥挤是受左右的 ...
- 一篇文章读懂开源web引擎Crosswalk-《转载》
前言 Web技术的优势早已被广大应用开发者熟知,比如可与云服务轻松集成,基于响应式UI设计的精美布局,高度的开放性,跨平台能力, 高效的分发与部署等等.伴随着移动互联网的快速发展与HTML5技术的逐步 ...
- 为什么有些网页QQ浏览器右键没有检查
改成[极速内核]. 设置->高级设置 改成[极速内核]: 如下图:
- Spring Boot整合JPA、Redis和Swagger2
好久没有总结了,最近也一直在学习.今天就把spring boot与其它技术的整合做个小总结,主要是jpa.redis和swagger2.公司里有用到这些,整合起来也很简单. 首先,新建一个Spring ...
- Zabbix监控websphere和weblogic
本节内容 zabbix java gateway 配置和运行java gateway 配置zabbix server使用java gateway 调整java gateway的日志级别 监控weblo ...
- SQL技巧两则:选择一个表的字段插入另一个表,根据其它表的字段更新本表内容
最近,在作django数据表迁移时用到的. 因为在django中,我把本来一个字符型字段,更改成了外键, 于是,哦喝~~~字符型字段相当于被删除了, 为了能导入这些字段的外键信息,于是出此下策. 其实 ...
- django使用RestFramework的Token认证
今天实现的想法有点不正规: Django Rest framework的框架的认证,API都运行良好. 现在是要自己写一个function来实现用户的功能. 而不是用Rest 框架里的APIVIEW这 ...
- HDU - 4809 树形dp
找了半天bug 发现把q打成了p... 思路:用dp[ i ][ j ][ k ] 表示在 i 这个点 这个点的状态为 j (0:不选 1:属于奇联通块 2:属于偶联通块) 且 奇联通块 - 偶联通块 ...
- SVM 的推导、特点、优缺点、多分类问题及应用
SVM有如下主要几个特点: (1) 非线性映射是SVM方法的理论基础,SVM利用内积核函数代替向高维空间的非线性映射: (2) 对特征空间划分的最优超平面是SVM的目标,最大化分类边际的思想是SV ...
- scp和rsync的区别和常用参数
一.scp 命令 1.scp 是 secure copy 的缩写,用于远程的文件的复制. 2.参数: -r: 递归复制整个目录. 3.实例: scp /home/space/music/1.mp3 u ...