css实现三角形的基本原理

原理

css盒子模型

一个标准的盒子包括content、padding、border、margin，上下左右交界处呈现光滑的斜线。通过设置上下左右边框的宽度和颜色可以得到小三角形，小梯形等。

1、设置元素的宽度、高度、以及边框

	.element{
		width: 20px;
  		height: 20px;
  		border-width: 20px;
  		border-style: solid;
  		border-color: red blue yellow green;
	}

2、把元素的宽高都设为0

	.element{
		width: 0px;
  		height: 0px;
  		border-width: 20px;
  		border-style: solid;
  		border-color: red blue yellow green;
	}

3、只保留某一边的边框

	.element{
		width: 0px;
  		height: 0px;
  		border-width: 20px;
  		border-style: solid;
  		border-color: red transparent transparent transparent;
	}

说明：需要添加以下几个属性

    overflow: hidden;
    font-size: 0;     /*虽然宽高为0, 但在IE6下会具有默认的宽高 */
    line-height: 0;  /* 字体大小和行高, 会导致盒子呈现被撑开的长矩形 */

另外，在IE6以下的浏览器不支持transparent，如果要兼容IE6以及以下的浏览器，需要设置其余三条边的类型为dashed，完整的代码如下所示

	.element{
		width: 0px;
  		height: 0px;
  		border-width: 20px;
  		border-style: solid dashed dashed dashed;
  		border-color: red transparent transparent transparent;
  		overflow: hidden;
  		font-size: 0;
  		line-height: 0;
	}