Tip中小三角的实现

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

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

demo页面:https://www.css88.com/demo/tipbox/

赞(0) 打赏
未经允许不得转载:WEB前端开发 » Tip中小三角的实现

评论 21

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

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

    phoetry8年前 (2011-07-28)回复
  2. #-48

    收藏了,留用。

    夏星辰8年前 (2011-07-28)回复
  3. #-47

    这个牛!

    灯盏细辛8年前 (2011-07-29)回复
  4. #-46

    微博群的返回顶部的就是用这个加一个方块做的向上的箭头

    断桥残雪8年前 (2011-07-29)回复
  5. #-45

    各有优缺点,两个方法轮流用~

    wo_is神仙8年前 (2011-07-29)回复
  6. #-44

    之前自己用◆做三角只能在三角是纯背景色下时用,现在知道了有边框的三角也可以这样做

    郁江丫头8年前 (2011-07-29)回复
  7. #-43

    这个好玩啊,又学一手啊

    上海游腾网络8年前 (2011-07-30)回复
  8. #-42

    遗憾的是小三角没有阴影

    挪墨8年前 (2011-08-01)回复
  9. #-41

    这个不错~

    ghy8年前 (2011-08-01)回复
  10. #-40

    这个方法真不错,而且延伸性很好,学习了~~

    爱读网8年前 (2011-08-03)回复
  11. #-39

    方法很好,怎么我复制demo在自己电脑上浏览时小三角有错位的现象。

    文润8年前 (2011-08-04)回复
    • @文润, 估计是样式没拷贝全!有个reset样式

      8年前 (2011-08-04)回复
  12. #-38

    研究了下,创意不错,但实践直来有些难度的。原理是用两个◆ ,一个占着位置,另一个比它向外多出一像素,且它的color和盒子的border-color相同。

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

    vimest8年前 (2011-08-05)回复
  13. #-37

    既然那个三角可以用字符代替,为什么旁边的“X”不用字符代替呢?

    小生8年前 (2011-08-10)回复
  14. #-36

    这个还真有意思,两个 方块啊

    Shadyduan8年前 (2011-08-17)回复
  15. #-35

    “有棱有角的唯一缺点是被人啃起来很方便”

    Camel__7年前 (2011-10-13)回复
  16. #-34

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

    瓶子7年前 (2011-10-31)回复
  17. #-33

    哇此方法太好了。。。这个最新项目正好用得着。。谢谢哈~~~

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

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

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏