Tip中小三角的实现

2011-07-26 分类：HTML+CSS / HTML5+CSS3 阅读(21696) 评论(21)

前段时间专门研究了一下腾讯微博的Tip，很有意思！tip中的小箭头是用“◆”（encode为：◆）字符模拟的。以前也写过类似的实现方案《用css的border属性实现三角》。用“◆”字符模拟小三角有一个有点就是：比如tip有border时，也可以用两个绝对定位的“◆”字符模拟。如图：

注意：最好根据您的实际情况设置“◆”的字体，我这里用了宋体，有棱有角真好！

demo页面：https://www.html.cn/demo/tipbox/

赞(0) 打赏

未经允许不得转载：WEB前端开发 » Tip中小三角的实现

相关推荐

评论 21

#-49
这个方法不错, 比边框法简单

phoetry8年前 (2011-07-28)回复
#-48
收藏了，留用。

夏星辰8年前 (2011-07-28)回复
#-47
这个牛！

灯盏细辛8年前 (2011-07-29)回复
#-46
微博群的返回顶部的就是用这个加一个方块做的向上的箭头

断桥残雪8年前 (2011-07-29)回复
#-45
各有优缺点，两个方法轮流用～

wo_is神仙8年前 (2011-07-29)回复
#-44
之前自己用◆做三角只能在三角是纯背景色下时用，现在知道了有边框的三角也可以这样做

郁江丫头8年前 (2011-07-29)回复
#-43
这个好玩啊，又学一手啊

上海游腾网络8年前 (2011-07-30)回复
#-42
遗憾的是小三角没有阴影

挪墨8年前 (2011-08-01)回复
#-41
这个不错～

ghy8年前 (2011-08-01)回复
#-40
这个方法真不错，而且延伸性很好，学习了~~

爱读网8年前 (2011-08-03)回复
#-39
方法很好，怎么我复制demo在自己电脑上浏览时小三角有错位的现象。

文润8年前 (2011-08-04)回复
- @文润, 估计是样式没拷贝全！有个reset样式
  
  8年前 (2011-08-04)回复
  - @, 已经知道了。哈哈
    
    文润8年前 (2011-08-04)回复
#-38
研究了下，创意不错，但实践直来有些难度的。原理是用两个◆ ，一个占着位置，另一个比它向外多出一像素，且它的color和盒子的border-color相同。

缺点最主要还是那边的颜色，因为不是真正的直线，看起来有点虚而且颜色比框的颜色淡一点，试过font-weight:bold没效果。而向外拉多一像素，就变得比框更粗。估计用某种字体可以解决，不过最安全的做法就是设它颜色比框的深。

vimest8年前 (2011-08-05)回复
#-37
既然那个三角可以用字符代替，为什么旁边的“X”不用字符代替呢？

小生8年前 (2011-08-10)回复
#-36
这个还真有意思，两个方块啊

Shadyduan8年前 (2011-08-17)回复
#-35
“有棱有角的唯一缺点是被人啃起来很方便”

Camel__7年前 (2011-10-13)回复
#-34
的确是个好方法，如果SD-tipbox和em都使用红色边框,再把span向外拉1px，这样反倒不怎么能看出来。不过，在我的IETester的IE6下似乎发现了一个缺陷，左边和顶部的没问题，右边和底部的都往SD-tipbox内延伸了一个像素，求解

瓶子7年前 (2011-10-31)回复
#-33
哇此方法太好了。。。这个最新项目正好用得着。。谢谢哈~~~

遇师7年前 (2011-11-26)回复

前端开发相关广告投放更专业更精准