提示三角箭头的三种方法

1、使用◆画提示三角

css：

.arrow {
	position:absolute;
	width:14px;
	height:14px;
}
.arrow i {
	position:absolute;
	font:14px normal normal Arial;
}
.arrow .i-1 {
	color:#ddd;
}
.arrow .i-2 {
	color:#fff;
}
.arrow-top .i-2 {
	top:1px;
}
.arrow-right .i-2 {
	right:1px;
}
.arrow-bottom .i-2 {
	bottom:-1px;
}
.arrow-left .i-2 {
	left:1px;
}

html：

<span class="arrow">
	<i class="i-1"></i>
	<i class="i-2"></i>
</span>

2、使用border画提示

css：

.caret {
	position:absolute
}
.caret-1 {
	width:0;
	height:0;
	display:inline-block;
	border:10px dotted transparent;
	font-size:0;
	position:absolute;
	top:0;
	left:0
}
.caret-2 {
	width:0;
	height:0;
	display:inline-block;
	border:10px dotted transparent;
	font-size:0;
	position:absolute
}
.caret-top .caret-1 {
	border-bottom-color:#ddd;
	border-bottom-style:solid
}
.caret-top .caret-2 {
	border-bottom-color:#fff;
	border-bottom-style:solid;
	top:1px;
	left:0
}
.caret-bottom .caret-1 {
	border-top-color:#ddd;
	border-top-style:solid
}
.caret-bottom .caret-2 {
	border-top-color:#fff;
	border-top-style:solid;
	top:-1px;
	left:0
}
.caret-left .caret-1 {
	border-right-color:#ddd;
	border-right-style:solid
}
.caret-left .caret-2 {
	border-right-color:#fff;
	border-right-style:solid;
	left:1px;
	top:0
}
.caret-right .caret-1 {
	border-left-color:#ddd;
	border-left-style:solid
}
.caret-right .caret-2 {
	border-left-color:white;
	border-left-style:solid;
	left:-1px;
	top:0
}

html：

<div class="caret caret-top">
	<b class="caret-1"></b>
	<b class="caret-2"></b>
</div>

3、使用图片

.arrow2 {
	position:absolute;
	background:url(arrow2.png) no-repeat;
}
.arrow2-top {
	background-position:0 0;
	width:25px;
	height:13px;
	left:50%;
	margin-left:-13px;
	top:-13px;
}
.arrow2-right {
	background-position:-25px 0;
	width:15px;
	height:25px;
	top:50%;
	margin-top:-13px;
	right:-15px;
}
.arrow2-bottom {
	background-position:-40px 0;
	width:25px;
	height:13px;
	left:50%;
	margin-left:-13px;
	bottom:-13px;
}
.arrow2-left {
	background-position:-65px 0;
	width:15px;
	height:25px;
	top:50%;
	margin-top:-13px;
	left:-13px;
}

html:

<i class="arrow2 arrow2-top"></i>

转载于:https://my.oschina.net/u/1866049/blog/300984