一目了然的css边框三角形

css实现边框三角形的方法：

<div class="triangle up"></div>
<div class="triangle right"></div>
<div class="triangle down"></div>
<div class="triangle left"></div>

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
}
/* up */
.up {
  border-width: 0 10px 10px;
  border-color: transparent transparent #f00;
}

/* right */
.right {
  border-width: 20px 0 20px 20px;
  border-color: transparent transparent transparent #f00;
}

/* down */
.down {
  border-width: 30px 30px 0;
  border-color: #f00 transparent transparent;
}

/* left */
.left {
  border-width: 40px 40px 40px 0;
  border-color: transparent #f00 transparent transparent;
}

或这种写法：

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
}
/* up */
.up {
  border-width: 10px;
  border-top-width: 0;
  border-color: transparent;
  border-bottom-color: #f00;
}

/* right */
.right {
  border-width: 20px;
  border-right-width: 0;
  border-color: transparent;
  border-left-color: #f00;
}

/* down */
.down {
  border-width: 30px;
  border-bottom-width: 0;
  border-color: transparent;
  border-top-color: #f00;
}

/* left */
.left {
  border-width: 40px;
  border-left-width: 0;
  border-color: transparent;
  border-right-color: #f00;
}

以上代码效果如下：

一目了然的css边框三角形

总结：

1、元素的display: block | inline-block;

2、元素width，height为0；

3、向上三角形的border-top-width：0； border-bottom-color: #f00; 即向上方向时，上边宽长度为0，与之相反的下边框颜色不透明即可。其他方向依次类推（一句话总结即：同方向边的边框宽度为零其他三边有宽度，对立方向的颜色不为透明其它三边透明）

一目了然的css边框三角形

总结：

相关推荐