css border实现三角形

一、border使用方法

1.1.css

.border-box-1 {
  width: 100px;
  height: 100px;
  border: 2px solid #f00;
  border-style: dotted solid double dashed;
  /*上边框是点状dotted 右边框和左边框是实线solid 下边框是双线double*/
 }

1.2.html

<div class="border-box-1"></div>

二.border 三角形

2.1.三角形原理，我们来看一个普通的底部边框

width: 100px;
height: 100px;
border-bottom: 12px solid #f00;

2.2.我们在右边添加一个边框，细心留意两个border的交界就是一个斜线

width: 100px;
height: 100px;
border-bottom: 12px solid #f00;
border-right: 12px solid #00f;

2.3.我们在左边边添加一个边框

width: 100px;
height: 100px;
border-bottom: 12px solid #f00;
border-right: 12px solid #00f;
border-left: 12px solid #0f0;

2.4.试想一下，我们把左右边框变成了透明的，是怎么样的呢？

width: 100px;
height: 100px;
border-bottom: 12px solid #f00;
border-right: 12px solid #transparent;
border-left: 12px solid #transparent;

已经变成了梯形了啊，我们怎么样把她变成三角形呢？

2.5.我们把宽设置为0

width: 0;
height: 0;
border-bottom: 12px solid #f00;
border-right: 12px solid transparent;
border-left: 12px solid transparent;

一个向上三角形已经出现了啊，哈哈哈

2.6.向下三角形

width: 0;
height: 0;
border-bottom: 12px solid #f00;
border-right: 12px solid transparent;
border-left: 12px solid transparent;

2.7.向左三角形

width: 0;
height: 0;
border-right: 12px solid #f00;
border-bottom: 12px solid transparent;
border-top: 12px solid transparent;

2.7.向右三角形

width: 0;
height: 0;
border-left: 12px solid #f00;
border-bottom: 12px solid transparent;
border-top: 12px solid transparent;