作为一个前端开发,一个主要的工作就是来实现设计师设计的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的详细知识可以去下面两个地址看看。

MDN

Codrops clip-path

clip-path 教程:使用 CSS 中的 clip-path 轻松实现多边形的更多相关文章

  1. CSS中的剪裁和遮罩

    剪裁和遮罩都是用来隐藏元素的一些部分.显示其他部分的.当然了,这两者还是有区别的.区别主要在于这几方面:他们能做的东西,不同的语法,涉及到的不同技术,是新的还是旧的,以及浏览器支持的差异. 但不幸的是 ...

  2. html5中的clip

    定义和用法 clip() 方法从原始画布中剪切任意形状和尺寸. 提示:一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内(不能访问画布上的其他区域).您也可以在使用 clip() 方法前通 ...

  3. css中使用if条件在各大浏览器(IE6\IE7\IE8)中hack方法解决教程

    一个滚动代码,其他浏览器都滚的好好的,就IE出现错误,DIV+CSS if条件hack,这里DIVCSS5为大家介绍针对各大浏览器(IE6\IE7\IE8)中使用if条件hack方法教程,DIV CS ...

  4. css中的em 简单教程 -- 转

    先附上原作的地址: https://www.w3cplus.com/css/px-to-em 习惯性的复制一遍~~~~ -------------------------------我是分界线---- ...

  5. 用APICloud开发iOS App Clip详细教程

    App Clip是苹果公司在WWDC20开发者大会上发布的新功能,用户可以只访问应用程序的一小部分,而无需下载整个应用,被称为苹果小程序.本文主要介绍如何通过APICloud开发App Clip. 一 ...

  6. 《手把手教你》系列技巧篇(十八)-java+ selenium自动化测试-元素定位大法之By css中卷(详细教程)

    1.简介 按计划今天宏哥继续讲解倚天剑-css的定位元素的方法:ID属性值定位.其他属性值定位和使用属性值的一部分定位(这个类似xpath的模糊定位). 2.常用定位方法(8种) (1)id(2)na ...

  7. css中clip-path属性的运用

    今天看到一位同学的需求,要在一个div中加一个小尖尖,对话时发的图片,旁边这个三角是怎么实现与图片的颜色一致,效果如下: 当然,解决这个问题有各种奇淫巧技,现在我们来看一个css属性clip-path ...

  8. css中的段落样式及背景

    一.段落样式 css中关于段落的样式主要有行高,缩进,段落对齐,文字间距,文字溢出,段落换行等.它们的具体语法如下: line-height : normal | length text-indent ...

  9. css中的text-overflow

    css中的text-overflow HTML中: <body><div class="clip">此处中多余的文字直接被切掉,不显示</div> ...

随机推荐

  1. C++ 虚函数及重载、重定义、重写

    #include<iostream> usingnamespace std; class BASE { public: BASE()=default; BASE(int publicVal ...

  2. 20155225 2016-2017-2 《Java程序设计》第十周学习总结

    20155225 2016-2017-2 <Java程序设计>第十周学习总结 教材学习内容总结 22章网络 22.1网络概览 22.2超文本传输协议(HTTP) 22.2.1 HTTP请求 ...

  3. 20155309南皓芯 实验2 Windows口令破解

    在网络界,攻击事件发生的频率越来越高,其中相当多的都是由于网站密码泄露的缘故,或是人为因素导致,或是口令遭到破解,所以从某种角度而言,密码的安全问题不仅仅是技术上的问题,更主要的是人的安全意识问题. ...

  4. win7下scheme环境配置

    运行lisp方言--scheme,在windows下,用eclipse. 1.eclipse装好 2.eclipse安装插件scheme48 development took, http://www. ...

  5. SQL之PROCEDURE(存储过程)

    先来看一小段代码 create procedure pr_bank(@bank_id int) as BEGIN select *from bank where bank_ID = @bank_id ...

  6. CF GYM100548 (相邻格子颜色不同的方案数 2014西安现场赛F题 容斥原理)

    n个格子排成一行,有m种颜色,问用恰好k种颜色进行染色,使得相邻格子颜色不同的方案数. integers n, m, k (1 ≤n, m ≤ 10^9, 1 ≤ k ≤ 10^6, k ≤ n, m ...

  7. Hive(九)Hive 执行过程实例分析

    一.Hive 执行过程概述 1.概述 (1) Hive 将 HQL 转换成一组操作符(Operator),比如 GroupByOperator, JoinOperator 等 (2)操作符 Opera ...

  8. 1975: [Sdoi2010]魔法猪学院

    k短路,只会写A*的飘过..priority_queue超空间差评!

  9. hmm学习笔记(二)

    学习hmm近一周的时间,做个总结. 参考  李航的<统计学习方法>第9章,第10章 本文包含: 1.hmm模型 2.前向后向算法 3.Baum-Welch算法 4.维特比算法 1.hmm模 ...

  10. ASP.NET:MVC模板化机制

    模版化的核心是定制ViewEngine.完整的模板化必须实现3个功能:1.网站的多套模版(razor)支持 2.模版的多样式(style)支持. 3.按需实现模版:没有实现的加载默认模版. 我们除了要 ...