浅析新浪微博:以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)


相关推荐

  • idea的html注释快捷键,idea 方法注释的快捷键设置

    idea的html注释快捷键,idea 方法注释的快捷键设置前言:使用idea有过一段一段时间了,每次写完方法需要都需要注释,要么手动注释要么用快捷键(/**回车)默认模板注释,不符合项目规定的注释要求,于是想了想是不是设置自定义的注释模板,上网查了资料整理一篇心得分享给大家。正文:默认注释是的样子:/****@parambookType*@parampageNum*@parampageSize*@return*/publicPagina…

  • SQL语句面试题目_sql基础知识面试题

    SQL语句面试题目_sql基础知识面试题我自己编辑总结的sql面试题目大全,也是每条都验证过的第一类:sql面试题(学生表_课程表_成绩表_教师表)表结构,节选自:http://www.cnblogs.com/qixuejia/p/3637735.html题目一,节选,自:https://wenku.baidu.com/view/cda288f1b90d6c85ed3ac671.html题目二,节选,自:http://ww…

  • C++ 单例模式_c 单例模式

    C++ 单例模式_c 单例模式原创文章,转载请注明出处。本文主要从单例的用处以及问题所做介绍

  • volatile关键字作用与内存可见性、指令重排序概述[JAVA]「建议收藏」

    volatile关键字作用与内存可见性、指令重排序概述[JAVA]「建议收藏」在理解volotile关键字的作用之前,先粗略解释下内存可见性与指令重排序。1.内存可见性Java内存模型规定,对于多个线程共享的变量,存储在主内存当中,每个线程都有自己独立的工作内存,并且线程只能访问自己的工作内存,不可以访问其它线程的工作内存。工作内存中保存了主内存中共享变量的副本,线程要操作这些共享变量,只能通过操作工作内存中的副本来实现,操作完毕之后再同步回到主内存当中,其JVM内存模型大

  • B+树|MYSQL索引使用原则

    B+树|MYSQL索引使用原则

    2020年11月12日
  • linux编译so库「建议收藏」

    linux编译so库「建议收藏」一、动态库so的编译以一个例子来说明。这里有三个so_test.h,test_a.c,test_b.c#ifndef_SO_TEST_H_#define_SO_TEST_H_voidtest_a();voidtest_b();voidtest_c();#endif /*_SO_TEST_H_*/#include#include”so_test.h”

发表回复

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

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