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> ...
随机推荐
- C++ 虚函数及重载、重定义、重写
#include<iostream> usingnamespace std; class BASE { public: BASE()=default; BASE(int publicVal ...
- 20155225 2016-2017-2 《Java程序设计》第十周学习总结
20155225 2016-2017-2 <Java程序设计>第十周学习总结 教材学习内容总结 22章网络 22.1网络概览 22.2超文本传输协议(HTTP) 22.2.1 HTTP请求 ...
- 20155309南皓芯 实验2 Windows口令破解
在网络界,攻击事件发生的频率越来越高,其中相当多的都是由于网站密码泄露的缘故,或是人为因素导致,或是口令遭到破解,所以从某种角度而言,密码的安全问题不仅仅是技术上的问题,更主要的是人的安全意识问题. ...
- win7下scheme环境配置
运行lisp方言--scheme,在windows下,用eclipse. 1.eclipse装好 2.eclipse安装插件scheme48 development took, http://www. ...
- SQL之PROCEDURE(存储过程)
先来看一小段代码 create procedure pr_bank(@bank_id int) as BEGIN select *from bank where bank_ID = @bank_id ...
- CF GYM100548 (相邻格子颜色不同的方案数 2014西安现场赛F题 容斥原理)
n个格子排成一行,有m种颜色,问用恰好k种颜色进行染色,使得相邻格子颜色不同的方案数. integers n, m, k (1 ≤n, m ≤ 10^9, 1 ≤ k ≤ 10^6, k ≤ n, m ...
- Hive(九)Hive 执行过程实例分析
一.Hive 执行过程概述 1.概述 (1) Hive 将 HQL 转换成一组操作符(Operator),比如 GroupByOperator, JoinOperator 等 (2)操作符 Opera ...
- 1975: [Sdoi2010]魔法猪学院
k短路,只会写A*的飘过..priority_queue超空间差评!
- hmm学习笔记(二)
学习hmm近一周的时间,做个总结. 参考 李航的<统计学习方法>第9章,第10章 本文包含: 1.hmm模型 2.前向后向算法 3.Baum-Welch算法 4.维特比算法 1.hmm模 ...
- ASP.NET:MVC模板化机制
模版化的核心是定制ViewEngine.完整的模板化必须实现3个功能:1.网站的多套模版(razor)支持 2.模版的多样式(style)支持. 3.按需实现模版:没有实现的加载默认模版. 我们除了要 ...