背景色三角形，只需改变 transparent（透明色） 就可改变方向，border-color 依次为上右下左

<div class="border-down"></div>

.border-down {
  width: 0;
  border-width: 20px;
  border-style: solid;
  border-color: black transparent transparent transparent;
  position: relative;
}

空心三角形，方法其实和填充三角形一样，都是只需要改变 transparent（透明色） 就可改变方向，利用两个三角形定位实现空心三角形

<div class="border-down">
	<span></span>
</div>

.border-down {
  width: 0;
  border-width: 20px;
  border-style: solid;
  border-color: black transparent transparent transparent;
  position: relative;
}

.border-down span {
  width: 0;
  border-width: 18px;
  border-style: solid;
  border-color: #ffffff transparent transparent transparent;
  position: absolute;
  top: -20px;
  left: -18px;
}