文档章节

css 箭头

ChinaKingM
 ChinaKingM
发布于 2018/05/09 15:14
字数 199
阅读 13
收藏 0

.game-Trend-shrink i{position: absolute; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 15px solid transparent; bottom: 1px; left: 50%; margin-left: -55px; z-index: 10;}
.game-Trend-shrink i:before{position: absolute; content: ""; width: 9px; height: 0px; border: 1px solid white; transform: rotate(133deg); -ms-transform: rotate(133deg); -moz-transform: rotate(133deg); -webkit-transform: rotate(133deg); -o-transform: rotate(133deg); bottom: 10px; left: 50%; margin-left: 17px;}
.game-Trend-shrink i:after{ position: absolute; content: ""; width: 9px; height: 0px; border: 1px solid white; transform: rotate(48deg); -ms-transform: rotate(48deg); -moz-transform: rotate(48deg); -webkit-transform: rotate(48deg); -o-transform: rotate(48deg); bottom: 10px; left: 50%; margin-left: 12px;}
.game-Trend-shrink.open i{position: absolute; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 15px solid transparent; bottom: 1px; left: 50%; margin-left: -55px; z-index: 10;}
.game-Trend-shrink.open i:before{position: absolute; content: ""; width: 9px; height: 0px; border: 1px solid white; transform: rotate(48deg); -ms-transform: rotate(48deg); -moz-transform: rotate(48deg); -webkit-transform: rotate(48deg); -o-transform: rotate(48deg);  bottom: 10px; left: 50%; margin-left: 17px;}
.game-Trend-shrink.open i:after{ position: absolute; content: ""; width: 9px; height: 0px; border: 1px solid white; transform: rotate(133deg); -ms-transform: rotate(133deg); -moz-transform: rotate(133deg); -webkit-transform: rotate(133deg); -o-transform: rotate(133deg);bottom: 10px; left: 50%; margin-left: 12px;}
 

© 著作权归作者所有

上一篇: CSS3自定义滚动条
下一篇: jQuery 表单插件
ChinaKingM
粉丝 1
博文 55
码字总数 5685
作品 0
其它
程序员
私信 提问
css三角形原理

前言:   在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对...

羊皮卷
2016/12/13
10
0
用 css 实现提示框的箭头

用 css 实现提示框上增加箭头 这个方法最酷的地方不仅是用纯 css 画出了小箭头,还有就是小箭头的背景和边框用了继承,所以后期即使要修改提示框的背景也很方便,以前居然用图片实现,想想工...

拉普拉斯婷
2016/10/14
17
0
鼠标放到a标签以后,该表鼠标的显示样式

样式的修改需要使用css进行控制的,控制的代码诸如:style="cursor:hand"其中hand表示的就是手型的样式,还有一下的几种: >其中的"hand"可以换成以下内容 pointer 手形 crosshair 十字形 te...

小老傅
2014/11/18
0
1
css手势状态定义属性cursor和自定义鼠标手势详解

css手势状态定义:cursor和自定义鼠标手势详解,示例演示cursor手势状态如下: auto : 默认值。浏览器根据当前情况自动确定鼠标光标类型。 all-scroll : 有上下左右四个箭头,中间有一个圆点...

罗马教堂的钟声
2015/12/10
8.8K
0
CSS基础教程——纯CSS开发的气泡式提示框

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:CSS基础教程 —— 纯CSS开发的气泡式提示框 作为前端开发人员,我们都熟悉使用CSS来生成页面上丰富的样式,对于边框border属性来说,也是我...

哟猫Intry
2016/07/07
17
0

没有更多内容

加载失败,请刷新页面

加载更多

PO BO VO DTO POJO DAO概念及其作用(附转换图)

J2EE开发中大量的专业缩略语很是让人迷惑,尤其是跟一些高手讨论问题的时候,三分钟就被人家满口的专业术语喷晕了,PO VO BO DTO POJO DAO,一大堆的就来了(听过老罗对这种现象的批判的朋友...

Airship
5分钟前
0
0
curses 管理插件

http://bbs.nga.cn/read.php?tid=9603776&rand=851

MtrS
今天
3
0
网站运营类指标

1 网站流量类指标 1.1 到达率 1.2 UV   UV即Unique Visitor,又称独立访客。UV是衡量用户“人数”的重要指标,反映了来到网站的用户“数量”。UV定义只跟时间有关。 1.3 Vist   Vist又称...

qwfys
今天
4
0
Commons-lang3提供的StopWatch执行时间监视器

Commons-lang3提供的StopWatch执行时间监视器, spring也提供了同样功能的工具 前言 我们如果要统计一段代码的执行时间:我们的办法是 public static void main(String[] args) {      ...

独钓渔
今天
2
0
Kernel 块设备驱动框架

1,总体架构: 块设备驱动框架是Linux设备最重要的框架之一,涉及内核的vfs,设备驱动模型等模块,是内核中异常复杂的一个框架。我们先看一下块设备设计的主要框架结构,先从总体上对块设备有...

yepanl
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部