HTML+css 画出三角形

在写selec自定义下拉框的时候，右边的三角因为没有图片，就自己用css写了一个三角形

  <div class="content"></div>

.content {
    border: 8px solid transparent;
    border-top: 10px white solid;
    width: 0px;
    height: 0px;
    display: inline-block;
    margin-left: 20px;
}

效果图：

 

如果需要把三角形调大，直接将border值变大即可。需要变高，调border-top即可。

然后需要改变箭头方向，只需要调border方向即可。如：

    border: 8px solid transparent;
    width: 0px;
    height: 0px;
    display: inline-block;
    margin-left: 20px;
    border-left: 8px solid;

效果图：