CSS手写向下小三角（极简代码）

原始实现：

效果如下：

代码极其简单：

div {
   width: 0;
   border: 10px solid;
   border-color: #333 transparent transparent transparent;
}

<div></div>

进一步理解：

step1:
首先设置一个宽高100px边框为1px，边框颜色分明的盒子，代码如下：

* {
  margin: 0;
  padding: 0;
}
div {
  width: 100px;
  height: 100px;
  border: 1px solid;
  border-color: red blue orchid green;
}

效果如下：

step2:
把边框设为100px

border: 100px solid;

效果如下：

step3:
边框宽度再增加，盒子中间也会有宽高撑着，画不完整三角形的样子，那么把宽高都设置为0

width: 0;
height: 0;

效果图：

step4:
需要向下的箭头，则把其他三个边框的颜色设置为transparent
需要左上角的阴影，则把右下的边框设置为transparent

向下箭头：

border-color: red transparent transparent transparent;

效果：

左上角的阴影：

效果：