前端技巧汇总：纯html和css实现三角形

随着css3和html5的普及，利用css3和html5中的知识能很容易的实现三角形，只不过脑残IE浏览器市场份额太大，国内尚有47.38%的份额，其中ie6还有接近6%的份额，html5和css3功能随强，遇到IE浏览器，你也没辙。你说恼人不恼人？所以今儿就不探讨利用html5和css3实现三角形的方法了。

如下图所示：

分享按钮点击后会弹出浮层，而浮层与按钮直接会有小三角凸起，这个是利用纯html+css实现的。

鼠标移动到默认头像位置，弹出浮层，浮层与默认头像之间会有三角凸起，而起默认头像上方或模拟a标签的hover样式，进行tips提示。这两处位置的三角也可以利用html+css实现。

---

第一种：利用css的border实现

既然可以用html和css实现三角形，总得有个缘由吧。

width:0;
height:0;
border-top:20px solid #F60;
border-left:20px solid #06f;
border-bottom:20px solid #000;
border-right:20px solid #009999;

html加css实现小三角的原理已经在上方显型了，将容器宽度值、高度值设置为0，然后通过设置容器的四个边的宽度和颜色值，即可很明显的看到由html加css实现的三角元素。代码段为实现上述样式的css代码，这个样式已经很明确的告知了我们这种利用css的border实现三角形的原理。

通过改变border的宽度值就可以实现三角形的角度变化，勾股定理都知道吧，就不用多啰嗦了。上述例子中三角形的长边长度为40px，高度值为20px，另外两条短边长度一致。

---

上述代码例子中通过不同的颜色标识的三角形就是我们要实现的三角形的元素，那么在实际生产环境中，我们不可能这四个三角形都需要使用，这就需要了解css样式知识中关于border透明的样式属性了。

css中关于border的有三个：border-width、border-color以及border-style，一般简化写法就是上述代码段中的一个属性值三个属性。这里面border-color就是咱们实现三角形的关键所在，border-color中除了指定颜色值（rgb类型、十六进制类型或者颜色值的英文如red），还可以指定为transparent，也就是透明类型。

/**实现三角形的角朝下**/
width:0;
height:0;
border-top:20px solid #F60;
border-left:20px solid transparent;
border-bottom:20px solid transparent;
border-right:20px solid transparent;
/**实现三角形的角朝上**/
width:0;
height:0;
border-top:20px solid transparent;
border-left:20px solid transparent;
border-bottom:20px solid #F60;
border-right:20px solid transparent;

上述代码在脑残ie6下会有稍许问题，可以将透明的边设置成dashed虚线类型即可解决。

这样利用html容器的border就实现了三角形，又有人说了，那实现三角形边框怎么办呢？其实那就是利用背景色重叠的原理来实现了，两个三角形的容器利用绝对定位的差值实现即可。比如第一个三角距离父容器顶部0像素，那么第二个三角形就距离父容器顶部1像素，利用两个三角形的颜色值，并且融合父容器背景色即可实现三角形边。

第二种：利用文本实现

这种方式，淘宝网以前常用，就不多吧唧了，主要使用实心菱形（◆）以及css的overflow:hidden，巧妙的将实心菱形的三角露出来，这样就可以通过font-size和font-color调节三角形的颜色和大小。

代码如下：

<!---HTML-->
<div class="poptip">
    <span class="poptip-arrow poptip-arrow-top"><em>◆</em><i>◆</i></span>
    <span class="poptip-arrow poptip-arrow-right"><em>◆</em><i>◆</i></span>
    <span class="poptip-arrow poptip-arrow-bottom"><em>◆</em><i>◆</i></span>
    <span class="poptip-arrow poptip-arrow-left"><em>◆</em><i>◆</i></span>
   Hi，我是三角形凸起<br />调节实心菱形位置即可实现凸起所在的边和偏移量
</div>

<!--CSS-->
.poptip{position: absolute;top: 20px;left:20px;padding: 6px 10px 5px;*padding: 7px 10px 4px;line-height: 16px;color: #DB7C22;font-size: 12px;background-color: #FFFCEF;border: solid 1px #FFBB76;border-radius: 2px;box-shadow: 0 0 3px #ddd;}
.poptip-arrow{position: absolute;overflow: hidden;font-style: normal;font-family: simsun;font-size: 12px;text-shadow:0 0 2px #ccc;}

.poptip-arrow em,.poptip-arrow i{position: absolute;left:0;top:0;font-style: normal;}
.poptip-arrow em{color: #FFBB76;}
.poptip-arrow i{color: #FFFCEF;text-shadow:none;}

.poptip-arrow-top,.poptip-arrow-bottom{height: 6px;width: 12px;left:12px;margin-left:-6px;}
.poptip-arrow-left,.poptip-arrow-right{height: 12px;width: 6px;top: 12px;margin-top:-6px;}

.poptip-arrow-top{top: -6px;}
.poptip-arrow-top em{top: -1px;}
.poptip-arrow-top i{top: 0px;}

.poptip-arrow-bottom{bottom: -6px;}
.poptip-arrow-bottom em{top: -8px;}
.poptip-arrow-bottom i{top: -9px;}

.poptip-arrow-left{left:-6px;}
.poptip-arrow-left em{left:1px;}
.poptip-arrow-left i{left:2px;}

.poptip-arrow-right{right:-6px;}
.poptip-arrow-right em{left:-6px;}
.poptip-arrow-right i{left:-7px;}

效果预览图