CSS模拟三角形

如果我们需要一个三角形的图像，这个时候，我们是不是需要去拿一个图片做背景，然后把需要在这个三角形内填充的内容，用定位的方法，放在图片中呢？

其实啊，只用CSS也是可以做到的，该文中的方法主要是借鉴了淘宝首页的CSS实现箭头的相关代码。

主要思想是：只使用border，并且border的边，有一个边的宽度是0，那么就就会出现三角形了。

比如：你这样写一下代码：

.c{
	border-bottom:1px solid #aaa;
	height:50px;
	width:100px;
	position:relative;
	overflow:hidden;
}
.c i{
	position:absolute;
	left:0px;
	bottom:0px;
	border-color:transparent;
	border-color:rgba(255,255,255,0);
	border-style:solid;
	border-width:0 50px 50px 50px;
	border-bottom-color:#aaa;
}

<div class = "c">
	<i></i>
</div>

为啥出了一个向上的三角形呢，关键就在border-width:0 50px 50px 50px;，这句代码里面，所以呢，如果你想要朝哪个方向的箭头，就把哪个方向的边框的宽度，变成0就可以了。

那再想想，如何让它变得像个箭头呢？再加一个标签，让它和<i>标签有相同的CSS，用绝对定位，稍微改变一下位置，然后把新的标签的颜色变成白色，不就出现了。

现在呢，用这个方法，实现三角框：

.a{
	border-bottom:1px solid #aaa;
	height:50px;
	width:100px;
	position:relative;
	overflow:hidden;
}
.b{
	position:absolute;
	display:block;
	top:0px;
	left:0px;
	width:100px;
	height:50px;
}
.b i,.b em{
	position:absolute;
	left:0px;
	bottom:0px;
	border-color:transparent;
	border-color:rgba(255,255,255,0);
	border-style:solid;
	border-width:0 50px 50px 50px;
}
.b i{
	border-bottom-color:#aaa;
}
.b em{
	border-bottom-color:#FFF;
	bottom:-1px;
}
.text{
	position:absolute;
	bottom:10px;
	background:none;
	border:none;
	outline:none;
	text-align:center;
	width:100%;
}

<div class = "a">
	<span class = "b">
		<i></i>
		<em></em>
	</span>
	<input type = "text" value = "文字" class = "text"/>
</div>

这个就不多啥了，理解了就很简单的，实现的思想也说了，测试了下，这种方法可以支持ie6-9的，chrome也是支持的，其他浏览器没有测试，应该问题不大。

测试显示：

欢迎交流！！！