css气泡,实现“倒三角(不知道算不算三角了)”可透明的。 财富值56

2016-10-23 22:49发布

如图显示,右边那个三角要如何实现?

友情提示: 此问题已得到解决,问题已经关闭,关闭后问题禁止继续编辑,回答。
该问题目前已经被作者或者管理员关闭, 无法添加新回复
15条回答

首先,我以为 border-radius 属性可以实现,为什么这么认为?因为我觉得 border-radius 应该可以有负值吧,正值是向外画圆,负值不就是想内画圆了吗。

大致说明一下思路,先是构造一个向右的三角形,不会构造的同学可以参考这篇文章 CSS 中的 border。接着画一个伪类 after 实现一个圆,背景颜色和大背景颜色一样,通过设置 position 把下面的三角形的下边给遮盖,就形成了最终的效果。

其实这样做有很大的弊端,比如元素的实际宽度会变大等,

那种不规则气泡图片一般不用代码画,一般图片遮罩实现,canvas,dom也好。
///////////////////////////////////
-webkit-mask-image 可以轻松实现你要的效果

http://output.jsbin.com/jeruxul

不过我觉得楼主的要求应该算实现了吧。 OooO,虽然和楼主的样式有点偏差。

气泡尖角是个独立的DIV,把不需要的边框颜色变成底色,然后用定位移到想要的地方

哈哈,看了一下,感觉很有意思。大致明白了楼主的意思,就是线是向内而不是向外。

一周热门 更多>