不用图,用简单的html和css就能实现新浪微博转发的箭头
<style>
.forward-list {
background: none repeat scroll 0 0 #F8F8F8;
border: 1px solid #DCDCDC;
font: 100 12px/20px Verdana,"宋体";
margin: 5px 0 0;
padding: 10px;
position: relative;
z-index: 0;
}
.forward-arrow {
font: 12px/23px Simsun,Arial;
left: 10px;
position: relative;
top: -20px;
z-index: 1;
}
.forward-arrow * {
color: #DCDCDC;
height: 10px;
overflow: hidden;
width: 18px;
}
.forward-arrow em {
font-size: 16px;
font-style: normal;
overflow: hidden;
position: absolute;
}
.forward-arrow span {
color: #F8F8F8;
font-size: 16px;
left: 0;
overflow: hidden;
position: absolute;
top: 1px;
}
</style>
<div class="forward-list">
<div class="forward-arrow"> <em>◆</em> <span>◆</span> </div>
</div>
原理就是用到了字符◆,然后两个◆相差一像素,就是边的颜色,上面的那个◆和div的颜色一样。
分享到:
相关推荐
纯CSS实现箭头 display: inline-block; margin: 72px; border-right: 24px solid; border-bottom: 24px solid; width: 120px; height: 120px; transform: rotate(-45deg);
之前做箭头一直都是用图片,也尝试过用新浪微博用的那种特殊符号“◆”,不过宽高,三角形的大小等都不太好控制,后来发现可以直接用css绘制,非css3,使用常规的border进行绘制,即使在IE6下也可以完美实现
这是一款基于Bootstrap的纯CSS3箭头按钮样式。该按钮通过修改原生Bootstrap的按钮样式,来生成指向左侧或右侧的箭头按钮。
这个就是用border写的左右上下箭头,一般是在对话框,表指向的时候用到,基本就相当于tips
一款基于Bootstrap的纯CSS3步骤条-箭头指向类按钮样式。该按钮通过修改原生Bootstrap的按钮样式,来生成指向左侧或右侧的箭头按钮。
主要为大家详细介绍了纯CSS绘制三角形箭头图案技术,如何使用:before和:after绘制CSS三角形,感兴趣的小伙伴们可以参考一下
这个是css和xml的高级运用,是针对有css基础的朋友看的
React箭头 呈现SVG箭头的React组件。 您可以使用它来指向事物。 观看演示: : 安装 $ npm install @elsdoerfer/react-arrow 样本 import Arrow from '@... 您将仅使用CSS style ,如示例中那样,确定页面上箭
简洁的CSS3滑动手风琴切换特效是一款基于font-awesome.css实现的网页手风琴菜单特效,切换时的箭头指向效果相当不错。
很多网站,当鼠标悬浮在一个元素上的时候能够弹出一个信息说明层,并且此层能够跟随鼠标移动,同时弹出的层带有箭头,此箭头指向鼠标悬浮的元素,下面就通过实例代码简单介绍一下如何实现此效果。 代码实例如下: &...
微信浏览器内显示遮罩层提示点击右上角,选择在浏览器中打开链接
尖尖的 一个jQuery插件,可以动态地将一个元素指向另一个元素。产品特点Pointy将创建一个任意角度的箭头,从指针指向被指尖(Pointy)... 画布用于添加从一个元素指向另一个元素的箭头,因此对箭头背景和边框颜色的css
箭头函数写法简洁,this 指向不同,arguments 对象指向父级作用域的 arguments 对象,不存在变量提升,没有 new.target拓展new 都发生了什么??创建一个新对象构造函数的作用域给了新对象执行构造函
图像轮播 具有下一个和上一个箭头,自动播放和文本覆盖的图像轮播。按下箭头时会重置自动播放,以防止在按下箭头后立即触发...在图像上包含指向IMDb(或类似图像)的链接 创作者 路易斯·钱德勒(Lewis Chandler)建造
##特征## 轻的通过CSS完全可定制自定义标记和光圈与jQuery兼容##用法## 首先,通过连接redline.css添加一些样式。 您可以通过使用自定义变量... 仪表初始化后,可以使用point方法移动箭头: $ ( '#gauge' )
箭头函数有什么特点?Map 和 Object 有什么区别?详细描述一下原型链(是什么?有什么用?有哪些特点?)防抖和节流,以及它们的应用场景?详细说说 var、let、const 的区别?this 到底指向谁?请分情况说明。什么是...
所有样式均已删除,并且该组件在没有CSS的情况下可以正常运行。 为了延长代码的使用时间,所有样式都应留给独立的项目特定主题。 通过指向内容面板的锚点链接逐渐增强。 使用JavaScript将hidden属性添加到面板,...
骰子池应用程序星球大战:帝国边缘战役骰子计算器此星球大战:帝国边缘战役骰子计算器由 Brian Miller 创建供个人使用,但请随时自行使用。...用法向上和向下箭头可在骰子池中添加和移除骰子。 相同类型
目标是创建没有ViewState,没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注:ExtAspNet基于一些开源...
目标是创建没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注:ExtAspNet基于一些开源的程序ExtJS, ...