HTML+css 画出三角形

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

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

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

效果图:

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

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

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

效果图:

原文地址:https://www.cnblogs.com/lovebear123/p/13294067.html