CSS实现三角形的方法之一--利用 border 属性实现三角形

这个原理很简单，我我们先看下面的图，这是一个边框为 20px 的 div，看他的边框，是个梯形，变化会从这里开始。



CSS：

.triangle{
width:30px;
height:30px;
border-width:20px;
border-style:solid;
border-color:#e66161 #f3bb5b #94e24f #85bfda;
}

好的，现在我把它的宽和高都设为 0，看看有什么变化。



四个边框都变成三角形了，现在我再把它的左右和下边框的颜色都设成透明或和背景颜色相同的颜色，就出来我们想要的三角形了，推荐把边框设置成透明，这样拓展性更好。

注：IE6下把边框设置成 transparent 时会出现黑影，并不会透明，把 border-style 设置成 dashed 可以解决。



CSS：

.triangle{
width:0;
height:0;
border-width:20px;
border-style:solid dashed dashed dashed;
border-color:#e66161 transparent transparent transparent;
}

如果我们想实现下图的效果该怎么办呢？很简单，做两个小三角，一个是背景色，一个是边框色，然后利用定位重叠在一起，记住他们的定位要相差一个像素。



HTML：

<div class="message-box">
<span>我是利用 border 属性实现的</span>
<div class="triangle-border tb-border"></div>
<div class="triangle-border tb-background"></div></div>

CSS：
.message-box {

   
position:relative;

   
width:240px;

   
height:60px;

   
line-height:60px;

   
background:#E9FBE4;

   
box-shadow:1px 2px 3px #E9FBE4;

   
border:1px solid #C9E9C0;

   
border-radius:4px;

   
text-align:center;

   
color:#0C7823;

}

.triangle-border {

   
position:absolute;

   
left:30px;

   
overflow:hidden;

   
width:0;

   
height:0;

   
border-width:10px;

   
border-style:solid dashed dashed dashed;

}

.tb-border {

   
bottom:-20px;

   
border-color:#C9E9C0 transparent transparent transparent;

}

.tb-background {

   
bottom:-19px;

   
border-color:#E9FBE4 transparent transparent transparent;

}

参考文章：
http://blog.csdn.net/huanghui8030/article/details/16984933