css的border法实现三角形

[lulujianglab]

原理

先看下border的表现形式

#box{
  width:100px;
  height:100px;
  background:yellow;
  border-top: 20px solid red;
  border-right:20px solid black;
  border-bottom:20px solid green;
  border-left:20px solid blue;
}

可以发现，border表现为梯形

所以，当我们减少box的宽高，一直降到0时，border就变成了三角形

所以我们就可以通过将元素宽高设置为0，而通过控制border来得到想要的三角形了

实现

只需要将不需要方向的border设置为透明（transparent），就可以用来实现三角形了

比如想实现下三角形，就将border-left，border-bottom，border-right设置为transparent即可

#box{
  width:0px;
  height:0px;
  border-top: 20px solid red;
  border-right:20px solid transparent;
  border-bottom:20px solid transparent;
  border-left:20px solid transparent;
}

实现梯形也就简单了，比如

#box{
  width:100px;
  height:100px;
  border-top: 60px solid red;
  border-right:20px solid transparent;
  border-bottom:0px solid transparent;
  border-left:20px solid transparent;
}

总而言之，通过调整border的大小和颜色/透明，就可以获得各种三角形和梯形了

那如果实现是带边框的三角形呢？如果是一个正方形，我们写边时，会用到边框

但这里的三角形本身就是border，不可能再给border添加border属性了，所以得用其他方法

比如叠加层，思路就是将两个三角形叠加在一起，外层三角形稍大一些，颜色设置成边框所需的颜色；内层三角形绝对定位在里面。整体就能形成带边框三角形的假象

实现

html:
<!-- 向上的三角形 -->
<div class="triangle_border_up">
    <span></span>
</div>

css:
/*向上*/
.triangle_border_up{
    width:0;
    height:0;
    border-width:0 30px 30px;
    border-style:solid;
    border-color:transparent transparent #333;/*透明 透明  灰*/
    margin:40px auto;
    position:relative;
}
.triangle_border_up span{
    display:block;
    width:0;
    height:0;
    border-width:0 28px 28px;
    border-style:solid;
    border-color:transparent transparent #fc0;/*透明 透明  黄*/
    position:absolute;
    top:0px;
    left:0px;
}

效果

但是并不是预想的这样

原因是，我们看到的三角形是边，而不是真的具有内容的区域，绝对定位（position:absolute），是根据相对定位父层内容的边界计算的

这个空的div，content的位置在中心，所以内部三角形是根据中心这个点来定位的

添加阴影可以看到

所以，内部的三角形都是根据外部三角形实际内容的点来定位的，而非我们肉眼看到的三角形的边界定位

将上述span的

top:0px;
left:0px;

改为

top:1px;
left:-28px;

就阔以了！