2016-10-23 22:49发布
如图显示,右边那个三角要如何实现?
首先,我以为 border-radius 属性可以实现,为什么这么认为?因为我觉得 border-radius 应该可以有负值吧,正值是向外画圆,负值不就是想内画圆了吗。
大致说明一下思路,先是构造一个向右的三角形,不会构造的同学可以参考这篇文章 CSS 中的 border。接着画一个伪类 after 实现一个圆,背景颜色和大背景颜色一样,通过设置 position 把下面的三角形的下边给遮盖,就形成了最终的效果。
其实这样做有很大的弊端,比如元素的实际宽度会变大等,
那种不规则气泡图片一般不用代码画,一般图片遮罩实现,canvas,dom也好。///////////////////////////////////-webkit-mask-image 可以轻松实现你要的效果http://output.jsbin.com/jeruxul
不过我觉得楼主的要求应该算实现了吧。 OooO,虽然和楼主的样式有点偏差。
气泡尖角是个独立的DIV,把不需要的边框颜色变成底色,然后用定位移到想要的地方
哈哈,看了一下,感觉很有意思。大致明白了楼主的意思,就是线是向内而不是向外。
最多设置5个标签!
付费偷看金额在0.1-10元之间
首先,我以为 border-radius 属性可以实现,为什么这么认为?因为我觉得 border-radius 应该可以有负值吧,正值是向外画圆,负值不就是想内画圆了吗。
大致说明一下思路,先是构造一个向右的三角形,不会构造的同学可以参考这篇文章 CSS 中的 border。接着画一个伪类 after 实现一个圆,背景颜色和大背景颜色一样,通过设置 position 把下面的三角形的下边给遮盖,就形成了最终的效果。
其实这样做有很大的弊端,比如元素的实际宽度会变大等,
那种不规则气泡图片一般不用代码画,一般图片遮罩实现,canvas,dom也好。
///////////////////////////////////
-webkit-mask-image 可以轻松实现你要的效果
http://output.jsbin.com/jeruxul
不过我觉得楼主的要求应该算实现了吧。 OooO,虽然和楼主的样式有点偏差。
气泡尖角是个独立的DIV,把不需要的边框颜色变成底色,然后用定位移到想要的地方
哈哈,看了一下,感觉很有意思。大致明白了楼主的意思,就是线是向内而不是向外。
一周热门 更多>