使用css画出向上或者向下的小三角

1.准备一个容器设置2em的边框

<div class="box">

  </div>

 css

 .box {

            width: 10px;

            height: 10px;

            border: 2em solid;

            border-color: black red gold green;

        }

 

 当然此时的效果并不是我们想要的，我们需要把宽高设置为0

 .box {

            width: 0px;

            height: 0px;

            border: 2em solid;

            border-color: black red gold green;

        }

 此时仅仅需要把不需要的小三角背景设置为透明就会得到一个我们需要的小三角（比如要向下的箭头）

 .box {

            width: 0px;

            height: 0px;

            border: 2em solid;

            border-color: black transparent transparent;

        }

 

 OK，现在得到了我们想要的效果了。