CSS实现小箭头

在进行设计页面的时候，往往会遇到列表的前面或者文字的后面需要用到箭头的情况，我们可以直接用图片作背景填充，也可以用CSS代码实现，使用后者会比较方便，兼容性顾虑相对而言也会减少。

小了解：在这里使用了两种方法实现，第一种是利用CSS3中的【transform】，我们可以先实现一个没有背景填充小正方形，设置它的边框、翻转就可以实现；第二种是利用伪类【：after】，设定一个高宽相等的正方形，选取所需要的某一边截取，就成了梯形，当高宽都为0像素，且其他边为透明颜色时，一个三角形就可以实现了。

HTML代码部分：

<div class="box">
	<p>随风潜入夜，润物细无声。</p>
	<div class="sr"></div>
	<p>安得广厦千万间，大庇天下寒士俱欢颜，风雨不动安如山。</p>
	<div class="ad"></div>
	<img  src="img/捕获.PNG"/>
</div>

CSS代码部分：

* {
	margin: 0px;
	padding: 0px;
}
.box{
	position: relative;
	height: 460px;
	width: 460px;
	margin: auto;
	margin-top: 100px;
	background-color: lightgoldenrodyellow;
	border: 2px solid olive;
}
.sr,.ad{
	position: absolute;
}
/*第一个箭头：使用变形翻转*/
.sr{
	left: 300px;
	top: 6px;
	width: 14px;
	height: 14px;
	border-top: 5px solid gainsboro;
	border-right: 5px solid gainsboro;
	transform: rotate(45deg);
}
.box p{
	font-family:"courier new";
	font-size: 25px;
}
/*第二个箭头：使用伪类*/
.ad:after{
    width: 0;
    height: 0; content: '';
    display: inline-block;
    border: 15px solid transparent;
    border-left: 15px solid gainsboro;
}
.ad{
	left: 195px;
	top: 70px;
}
.box img{
	width: 360px;
	height: 242px;
	position: absolute;
	margin-left: 48px;
	margin-top: 50px;
}

演示效果（图片是前几天下雨拍的，相册里超喜欢的一张）

别人什么都没有做，是你不肯放过自己。元气少女，加油哇！

猜你喜欢