还在用图片表示三角形与箭头吗？不会用CSS来绘制你就OUT了！！！

作者:WangMin

格言:努力做好自己喜欢的每一件事

你是否还在用图片制作三角形和剪头吗？那就太out了。css可以轻松绘制出你想要的三角形与箭头，而且颜色大小可以随意改变，还不用担心失真等问题。那就一起来看看吧！！

实现原理

首先来看看当我们给元素添加border时，border的样子。假设代码如下：

<div class="box"></div>
.box{
    width:100px;
    height:100px;
    border:2px solid #f00;
}

网页显示如下：

这是我们使用border最常见的情况：给元素添加边框，往往只给border一个较小的宽度（通常为1-2px）。但是这种的常见的用法就会很容易让大家对border的形成方式产生误解，认为元素的border是由四个矩形边框拼接而成。

然而事实并我们认为的那样。元素的border是由三角形组合而成，为了给大家说明这个问题，这里我加大了border的宽度，并为border四条（上、下、左、右）边分别设置了不同的颜色。假设代码如下：

<div class="box"></div>
.box{
	width:100px;
	height:100px;
	border:50px solid;
	border-color: tomato peru brown sandybrown;
}

网页显示如下：

从例子中我们可以看出：每个边都是一个梯形。每一条边为什么会呈现出梯形的形态呢？那是因为我给元素设置了宽度与高度，那么如果当我把元素的宽度与高度都设置为0会发生什么情况呢？假设代码如下：

<div class="box"></div>
.box{
	width:0px;
	height:0px;
	border:50px solid;
	border-color: tomato peru brown sandybrown;
}

网页显示如下：

这时我们就可以发现元素由上下左右4个三角形 "拼接" 而成。那么为了绘制出三角形，还应该怎么做？显而易见，只需要把其它border边的颜色设置为透明色就可以了。如果想实现向上三角形，则其他的边为transparent，只设置最下面的边框颜色，就可以实现向上三角形，同理可以实现各种三角形。

各种方向三角形的写法

1、向上三角形，根据上面的实现原理，只需要保留下面的边，代码如下：

<div class="box"></div>
.box{
	width:0px;
	height:0px;
	border:50px solid;
	border-color: transparent transparent pink transparent;
 }

网页显示如下：

2、向下三角形，根据上面的实现原理，只需要保留上面的边，代码如下：

<div class="box"></div>
.box{
	width:0px;
	height:0px;
	border:50px solid;
	border-color: pink transparent transparent transparent;
 }

网页显示如下：

3、向左三角形，根据上面的实现原理，只需要保留右面的边，代码如下：

<div class="box"></div>
.box{
	width:0px;
	height:0px;
	border:50px solid;
	border-color:transparent pink transparent transparent;
 }

网页显示如下：

4、向右三角形，根据上面的实现原理，只需要保留左面的边，代码如下：

<div class="box"></div>
.box{
	width:0px;
	height:0px;
	border:50px solid;
	border-color:transparent transparent transparent pink;
 }

网页显示如下：



5、保留上边和左边组成三角形，代码如下：

<div class="box"></div>
.box{
	width:0px;
	height:0px;
	border:50px solid;
	border-color:pink transparent transparent pink;
 }

网页显示如下：



6、保留上边和右边组成三角形，代码如下：

<div class="box"></div>
.box{
	width:0px;
	height:0px;
	border:50px solid;
	border-color:pink pink transparent transparent;
 }

网页显示如下：



7、保留底边和左边组成三角形，代码如下：

<div class="box"></div>
.box{
	width:0px;
	height:0px;
	border:50px solid;
	border-color:transparent transparent pink pink;
 }

网页显示如下：



8、保留底边和右边组成三角形，代码如下：

<div class="box"></div>
.box{
	width:0px;
	height:0px;
	border:50px solid;
	border-color:transparent pink pink transparent;
 }

网页显示如下：



从上面可以得到其实三角形是由三条方向的边框组成的，但是如果给四条边框都设置宽度时，即使某一边或者两边的边框颜色为透明色，实质上还是会占据边框宽度，所以当我们在绘制三角形，我们只需要给实现三角形所需要的三边的边框的宽度与颜色设置好就可以了。所以以上的三角形代码都可以根据你的需求简写。

以向下三角形为例，给四边都根据三角形组成原理设置了边框宽度与颜色，网页显示如下：



红色箭头部分其实是没有必要显示出来的，也就是底部边框，所以我们就没有必要给底边设置边框宽度与颜色。代码如下：

<div class="box"></div>
.box{
	width:0px;
	height:0px;
	border-left: 50px solid transparent;
	border-right:50px solid transparent;
	border-top:50px solid pink;
 }

网页显示如下：



同理，上面提到的各种三角形都可以根据自己的需求这样来写，来减少对多余空间的渲染与占据的空间。

实现带边框的三角形

带边框的三角形就是给三角形添加其它颜色的边框，就像给元素添加border一样，效果如下图：



由于不能继续通过给三角形设置border的方法来为其设置边框（因为三角形本身就是利用border实现的），所以只能想其他的办法。而能想到的一个最自然的方法就是三角形叠放，就是把当前三角形叠放在更大的三角形上方，上面效果图所展示出的三角形的实现方法就是把蓝色三角形放在了尺寸更大的红色三角形上。

为了这样的效果，所以需要利用绝对定位方法。首先定义出外面的红色三角形，因为绝对定位要相对于父元素进行定位，所以这里需要给红色三角形设置相对定位，代码如下：

<div class="box"></div>
.box{
	width:0px;
	height:0px;
	position: relative;
	border-left: 50px solid transparent;
	border-right:50px solid transparent;
	border-bottom:50px solid #f00;
}

网页显示如下：



然后再定义蓝色三角形，但是由于蓝色三角形的定位需要参考红色三角形的位置，所以需要给蓝色三角形设置绝对定位。因此需要将蓝色三角形作为红色三角形的子元素。我首先想到的方法是在红色三角形内部定义另外一个标签来表示蓝色三角形，但是为了节约标签简化网页结构，最好的办法是使用伪元素。蓝色三角形代码如下：

.box:after{
       content: "";
       width: 0;
       height: 0;
       position: absolute;
       top: 0px;
       left: 0px;
       border-left: 50px solid transparent;
       border-right:50px solid transparent;
       border-bottom:50px solid blue;
   }

网页显示如下：



到这一步可能你会有疑问：为什么蓝色三角形会向左偏移一段距离呢，按道理不应该完全重合在红色三角形上吗，就像下面这样：



但是这样会让你觉得似乎红色三角不见了，实际上红色三角形只是被蓝色三角覆盖了，但这也显现出来你的一个问题：对绝对定位没有足够的了解。因为绝对定位的区域是相对于父元素的区域（包括内边距padding所占的区域），然后在这个基础上运用top、left、right、bottom等属性来约束绝对定位子元素的位置。例如如下代码：

<div class="box"></div>
.box{
      width:20px;
      height:20px;
      padding:10px;
      position: relative;
      border-left: 50px solid transparent;
      border-right:50px solid transparent;
      border-bottom:50px solid #f00;
  }
  .box:after{
      content: "";
      width: 0;
      height: 0;
      position: absolute;
      top: 0px;
      left: 0px;
      border-left: 50px solid transparent;
      border-right:50px solid transparent;
      border-bottom:50px solid blue;
  }

这里我给元素设置了宽度与高度，并且还设置了padding，红色框表示元素的整体尺寸（包括各个方向的内边距），黑色框表示的是蓝色三角形的整体尺寸，从图中可以看出蓝色三角形是相对于红框的左上角进行定位的。

在本例中，由于红色三角形作为绝对定位父元素，它的尺寸为0，所以元素的尺寸就是红色三角形的上顶点，也就是下图中红色箭头交叉位置。



蓝色三角形由于设置了left: 0和top: 0，所以蓝色三角形的所有内容将根据红色三角形的上顶点进行定位。由于蓝色三角形区域也位于其顶点处，而且对其也设置了左右各50px的border，所以蓝色三角形的内容区域将向右偏移50px，所以形成了之前显示的效果。

弄清楚了绝对定位以后，只需要在最开始的代码上稍稍修改就可以将蓝色三角形的顶点与红色三角形顶点相重合，同时还应该适当缩小蓝色三角形的尺寸（根据你需要的边框宽度而定），因为这里我们需要在页面上显示出一个带红色边框的蓝色三角形，代码如下：

<div class="box"></div>
.box{
	width:0px;
	height:0px;
	position: relative;
	border-left: 50px solid transparent;
	border-right:50px solid transparent;
	border-bottom:50px solid #f00;
}
.box:after{
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	top: 0px;
	left: -46px;
	border-left: 46px solid transparent;
	border-right:46px solid transparent;
	border-bottom:46px solid blue;
   }

网页显示如下：



到这一步了，相信大家都知道该怎么做了吧！只需要利用top将蓝色三角形向下移动到合适的位置就可以了，代码如下：

<div class="box"></div>
.box{
	width:0px;
	height:0px;
	position: relative;
	border-left: 50px solid transparent;
	border-right:50px solid transparent;
	border-bottom:50px solid #f00;
}
.box:after{
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	top: 3px;
	left: -46px;
	border-left: 46px solid transparent;
	border-right:46px solid transparent;
	border-bottom:46px solid blue;
   }

最终带红色边框的蓝色三角形就完成了，网页显示效果如下：



向下带红色边框的蓝色三角形，代码如下：

<div class="box"></div>
.box{
      width:0px;
      height:0px;
      position: relative;
      border-left: 50px solid transparent;
      border-right:50px solid transparent;
      border-top:50px solid #f00;
  }
  .box:after{
      content: "";
      width: 0;
      height: 0;
      position: absolute;
      bottom: 3px;
      left: -46px;
      border-left: 46px solid transparent;
      border-right:46px solid transparent;
      border-top:46px solid blue;
  }

网页显示效果如下:



向左带红色边框的蓝色三角形，代码如下：

<div class="box"></div>
.box{
      width:0px;
      height:0px;
      position: relative;
      border-top:50px solid transparent;
      border-bottom:50px solid transparent;
      border-right:50px solid #f00;
  }
.box::after{
      content: "";
      width: 0;
      height: 0;
      position: absolute;
      top:-46px;
      left:4px;
      border-top: 46px solid transparent;
      border-bottom:46px solid transparent;
      border-right:46px solid blue;
  }

网页显示效果如下:



向右带红色边框的蓝色三角形，代码如下：

<div class="box"></div>
.box{
      width:0px;
      height:0px;
      position: relative;
      border-top:50px solid transparent;
      border-bottom:50px solid transparent;
      border-left:50px solid #f00;
  }
  .box::after{
      content: "";
      width: 0;
      height: 0;
      position: absolute;
	  bottom:-46px;
	  right:3px;
      border-top: 46px solid transparent;
      border-bottom:46px solid transparent;
      border-left:46px solid blue;
  }

网页显示效果如下:

利用三角形实现箭头

学会了带边框三角形的绘制，那我们就可以在它的基础上来实现三角形箭头来 ，只需要稍作修改就可以了。只需要将子元素的top值或者bottom值添加1-2个像素（px），并且将子元素需要保留的那一边的边框颜色设置为白色，这样就可以的到箭头符号了。

1、向上箭头的实现，代码如下：

<div class="box"></div>
.box{
     width:0px;
     height:0px;
     position: relative;
     border-left: 50px solid transparent;
     border-right:50px solid transparent;
     border-bottom:50px solid #f00;
 }
 .box:after{
     content: "";
     width: 0;
     height: 0;
     position: absolute;
     top: 4px;
     left: -46px;
     border-left: 46px solid transparent;
     border-right:46px solid transparent;
     border-bottom:46px solid #fff;
 }

网页显示如下：



2、向下箭头的实现，代码如下：

<div class="box"></div>
.box3{
	width:0px;
	height:0px;
	position: relative;
	border-left: 50px solid transparent;
	border-right:50px solid transparent;
	border-top:50px solid #f00;
}
.box3:after{
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	bottom: 4px;
	left: -46px;
	border-left: 46px solid transparent;
	border-right:46px solid transparent;
	border-top:46px solid #fff;
}

网页显示如下：



3、向左箭头的实现，代码如下：

<div class="box"></div>
.box{
	width:0px;
	height:0px;
	position: relative;
	border-top:50px solid transparent;
	border-bottom:50px solid transparent;
	border-right:50px solid #f00;
}
.box::after{
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	top:-46px;
	left:4px;
	border-top: 46px solid transparent;
	border-bottom:46px solid transparent;
	border-right:46px solid #fff;
}

网页显示如下：



4、向右箭头的实现，代码如下：

<div class="box"></div>
.box{
	width:0px;
	height:0px;
	position: relative;
	border-top:50px solid transparent;
	border-bottom:50px solid transparent;
	border-left:50px solid #f00;
}
.box::after{
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	bottom:-46px;
	right:4px;
	border-top: 46px solid transparent;
	border-bottom:46px solid transparent;
	border-left:46px solid #fff;
}

网页显示如下：

---

以上仅是个人见解，若有不足之处欢迎在下方评论指出，那就先分享到这里!! 后续继续更新!!