浅析新浪微博:以css实现的小三角提示框

浅析新浪微博:以css实现的小三角提示框

分析新浪微博就会发现一个有趣的带小三角提示框。先来看下效果图:


浅析新浪微博:以css实现的小三角提示框

 
仔细查看代码才发现,并不是使用传统做法以图片的background属性实现,而是以两个”◆”菱形字符实现,这个菱形支持
编码有
GBK,gb312,UTF-8等,也可通过转义字符&#9670输入。
 
浅析新浪微博:以css实现的小三角提示框
实现的原理是:em标签里得◆菱形符号作为外三角边框,而<span>标签里的◆菱形符号正好填充em,当两个菱形符号重叠时,只需调整span里的菱形往下移动1px,那么就能呈现1px的向上三角边框。
浅析新浪微博:以css实现的小三角提示框
由于新浪微博的特性,代码并不容易提取。按照它的思路,我只好自己写一次。
下面是html,为了统一把em标签换成span标签。
<div class="comment"> <div class="arrow"> <span class="out">◆</span> <span class="inside">◆</span> </div> <p>带小三角的提示框</p> </div>

css代码:

.comment{padding:10px;background:#fff; border-radius:3px;border:1px solid #e1e4e5;position:relative } .arrow {_display:none;position:absolute;top:-9px;left:20px;overflow:hidden;display:block; } .arrow .out{display:inline-block;overflow:hidden;color:#e1e4e5; } .arrow .inside{top:1px;color:#fbfbfb;left:0px;position:absolute; }

为什么◆要定义字体?其目的通过字体属性把它放大,也可通过span加上字体加粗font-weight:bold属性再增大三角形边框。明确了方法与原理,我么就可以在不同方向,不同位置放置三角形了。

浅析新浪微博:以css实现的小三角提示框
以上所写代码能够兼容目前所有浏览器,包括IE6。貌似新浪微博的好像不兼容IE6哦,小得瑟一下,哈哈~~~~~~~~

转载于:https://my.oschina.net/collins401/blog/57869

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/110405.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 鸿蒙3部曲先看哪部,星辰变是“鸿蒙”系列的作品,那“鸿蒙”系列到底有多少部曲?…

    鸿蒙3部曲先看哪部,星辰变是“鸿蒙”系列的作品,那“鸿蒙”系列到底有多少部曲?…说到《星辰变》,相信很多人都知道他的作者就是番茄吧?而番茄笔下最出名系列的小说,无疑就是“鸿蒙”系列了,其中《星辰变》就是“鸿蒙”系列中的一部作品。那“鸿蒙”系列小说到底有多少部曲呢?对此也有很多人有了这个疑问。原先的“鸿蒙三部曲”相信很多熟悉番茄小说的朋友都知道,原本番茄的《盘龙》《星辰变》《吞噬星空》被很多粉丝称之为“鸿蒙三部曲”。因为在《星辰变》的结局中我们也知道,鸿蒙创立了三个不同的世界,…

  • Selenium WebDriver下载安装

    Selenium WebDriver下载安装SeleniumWebDriver下载1.确认操作系统版本->win10,64位系统2.确认要使用的浏览器及版本->谷歌浏览器,91.0.4472.77(正式版本)(64位)3.去找webdriver驱动a.谷歌浏览器驱动下载地址:http://chromedriver.storage.proxy.ustclug.org/index.html【找与本机谷歌浏览器版本相匹配的驱动版本,最后一位小版本77可不对应,Windows系统选择chromedriver_win32.zip下载即

  • long转string java_java中long如何转成String????????

    long转string java_java中long如何转成String????????展开全部longl=Long.parseLong(“String”);longl=Long.parseLong(“String”,int);longl=Long.valueOf(“String”).longValue();Long.ValueOf(“String”)与Long.parseLong(“String”)的区别Long.ValueOf(“String”);返回Long包…

  • Win10 桌面美化

    Win10 桌面美化Win10桌面美化最近发现了几款Win10界面美化的软件,看了看别人家的Win10操作界面,瞬间觉得自己的low了,关键是赏心悦目啊!废话不多说,先看看我原来桌面和美化后的桌面对比图原始桌面美化桌面1.安装RocketDockRocketDock可以提供类似macos的操作系统图标特效,打开安装包进行安装,完毕后启动得到效果如下:可以发现切换效果与mac类似,他默认的主题是C…

  • C语言数组——字符数组

    C语言数组——字符数组C语言目录C/C++学习资源(百度云盘链接)计算机二级资料(过级专用)C语言学习路线(从入门到实战)编写C语言程序的7个步骤和编程机制C语言基础-第一个C程序C语言基础-简单程序分析VS2019编写简单的C程序示例简单示例,VS2019调试C语言程序C语言基础-基本算法C语言基础-数据类型C语言中的输入输出函数C语言流程控制语句C语言数组——一维数组C语言数组——二维数…

  • 2022Android SDK下载与安装

    2022Android SDK下载与安装一、下载sdk:https://www.androiddevtools.cn找个合适的位置解压双击“SDKManager.exe”,启动SDKManager安装工具我们可以通过有AndroidSDK的国内镜像服务器来下载安装,这里推荐几个:1、中科院开源协会镜像站地址:IPV4/IPV6:http://mirrors.opencas.ac.cn端口:802、北京化工大学镜像服务器地址:IPv4:http://ubuntu.buct.edu.cn/端口:80IPv

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号