css实现三角形的基本原理

原理

css盒子模型
css实现三角形的基本原理_第1张图片
一个标准的盒子包括content、padding、border、margin,上下左右交界处呈现光滑的斜线。通过设置上下左右边框的宽度和颜色可以得到小三角形,小梯形等。

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

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

css实现三角形的基本原理_第2张图片

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

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

css实现三角形的基本原理_第3张图片

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;
	}

你可能感兴趣的:(CSS)