css中clip-path属性的运用
今天看到一位同学的需求,要在一个div中加一个小尖尖,对话时发的图片,旁边这个三角是怎么实现与图片的颜色一致,效果如下:
当然,解决这个问题有各种奇淫巧技,现在我们来看一个css属性clip-path,很炫酷。
看属性,肯定要说兼容性问题,clip-path之所以没有很普及,也是因为其浏览器兼容问题。很多IE浏览器对齐属性不是很支持。我们看下他的浏览器兼容:
我们看到IE是完全不支持,尽量使用webkit内核,需要加上内核前缀-webkit-(转自haorooms博客)。
clip-path
,包括了一条闭合的矢量路径,它可以是CSS中定义的基础形状,也可以是包含了clipPath
标签的SVG元素。在闭合路径内的内容会显示,而路径外边的都会被剪掉。
CSS Shapes Module中的基础形状提供了一个非常方便的使用clip-path
的方法。它有多种不同的可以使用的形状如polygon
,circle
, ellipse
和 inset
;其中,inset
是矩形。
基本语法:
.element {
clip-path: polygon(x1 y1, x2 y2, x3 y3, ...);
}
跨浏览器的代码写法:
.element {
-webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 80% 100%);
clip-path: polygon(0 100%, 0 0, 100% 0, 80% 100%);
-webkit-clip-path: url("#clip-shape"); /* 在Webkit或Blink浏览器中需要添加,如果你只使用内联SVGclipping path,而不是CSS clip-path的话 */ clip-path: url("#clip-shape");
}
.clip {
/* 引用一个内联的 SVG <clipPath> 路径*/ clip-path: url(#c1);
/* 引用一个外部的 SVG 路径*/ clip-path: url(path.svg#c1);
/* 多边形 */ clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
/* 圆形 */ clip-path: circle(30px at 35px 35px); /* 椭圆 */ clip-path: ellipse(65px 30px at 125px 40px);
/* inset-rectangle() 将会替代 inset() ? */
/* rectangle() 有可能出现于 SVG 2 */
/* 圆角 */ clip-path: inset(10% 10% 10% 10% round 20%, 20%);
}
看完是不是想吐槽了,这参数设置好头疼啊。。。哈哈,推荐一个maker工具,你画好图形,代码就再下面。。。
链接接着,走好不送——http://bennettfeely.com/clippy/
css中clip-path属性的运用的更多相关文章
- CSS 中关于background 属性功能
background 是 css中的核心属性,我们对他应该充分了解. background-image 定义背景图像 这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...
- Css中的Position属性
Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...
- css中background背景属性概
css中background背景属性概 background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/background:url(背景图片路径) no-repeat ...
- CSS中的display属性
CSS中的display属性 display:block是可以把非块级元素强制转换为块级元素显示,如内嵌元素span,原来不支持设置宽高,宽度是由内容撑开的,几个span元素是在同一行内的,如果给sp ...
- 举例详解CSS中的cursor属性
这篇文章主要举例介绍了CSS中的cursor属性,包括zoom-in/zoom-out和grab/grabbing等常用属性值的使用,需要的朋友可以参考下 一.开篇之言 CSS3的领域范围已经渗透到了 ...
- 深入理解css中的margin属性
深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...
- 理解与应用css中的display属性
理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...
- css中的列表属性
list-style-type设定引导列表的符号类型,可以设置多种符号类型,值为disc.circle.square等 list-style-image使用图像作为定制列表的符号 list-style ...
- CSS中的!important属性用法
关于CSS的运用技巧有很多, 今天主要探讨一下CSS中 !important 这个属性的用法.在CSS的使用中,遇到最多的问题就是不同浏览器之间的兼容问题. 由于IE并不严格执行W3C标准, 而又几乎 ...
- CSS中的display属性(none,block,inline,inline-block,inherit)
css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...
随机推荐
- Unity3d程序运行的时候在unity3d标志哪里进不去的原因
我那个去,居然是有两个error..我郁闷了,unity编译器有error居然也能打包能apk.我真是醉了.搞了我几个小时.
- mvc4 分离Controller 出现 未找到路径“/”的控制器或该控制器未实现 IController
一般MVC项目都会把Controller 分离出来独立类库,以前用mvc3一直这样做,测试发布都能够正常运行,这次用了mvc4,发现会报错:HTTP 404.您正在查找的资源(或者它的一个依赖项)可能 ...
- 图片转base64
function convertImgToBase64(url, callback, outputFormat){ var canvas = document.createElement('CANVA ...
- How browsers work
这几天翻译一篇旧文 How browsers work ( 以现代浏览器chrome.火狐.safari 为对象来分析),这篇文章网上有其他的翻译版本,自己再翻译一遍主要是练习阅读英文文章,而且自己翻 ...
- C# 调用Adodb对Access数据库执行批量插入
public void BatchInsertIntoAccess(DataTable dt) { ADODB.Connection cn; ADODB.Recordset rs; string st ...
- 获取iPhone 联系人列表,并且根据分析得到的姓名首字母进行排序
获取手机联系人以iOS9为分界点,大家都知道到了iOS9很多方法都更新了,好多接口都弃用,被新的接口代替.这Demo种有新旧两个接口,使用前判断当前iOS版本. 下面是Demo连接地址:Github的 ...
- sql评估期已过如何解决该问题
点击开始-所有程序-Microsoft SQL Server 2008-配置工具-SQL Server 安装中心然后点击左侧的维护,在点击右侧的版本升级,接着按照提示一直点下一步,到产品密钥的时候输入 ...
- amqp事务
摘要: 介绍confirm的工作机制.使用spring-amqp介绍事务以及发布确认的使用方式.因为事务以及发布确认是针对channel来讲,所以在一个连接中两个channel,一个channel可以 ...
- redis python-redis 安装详细步骤
安装redis 把redis安装到 /opt/redis-2.8目录中 wget http://download.redis.io/releases/redis-2.8.1.tar.gz tar -z ...
- cxf client端借口类型找不到问题
问题: log4j:WARN See http://logging.apache.org/log4j/1.2/faq.html#noconfig for more info.Exception in ...