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也是支持的，其他浏览器没有测试，应该问题不大。

测试显示：



欢迎交流！！！