css如何在下拉框添加倒三角

CSS实现下拉框添加倒三角的方法如下：

.select{
    position:relative;
    border:1px solid #ccc;
    border-radius:4px;
    padding:0 12px;
    height:30px;
    line-height:30px;
    cursor:pointer;
    background-color:#fff;
}
.select:after{
    content:'';
    position:absolute;
    right:10px;
    top:50%;
    margin-top:-3px;
    border-width:6px 6px 0;
    border-style:solid;
    border-color:#666 transparent;
}
.select-options{
    position:absolute;
    z-index:10;
    top:30px;
    left:0;
    right:0;
    border:1px solid #ccc;
    border-radius:4px;
    background-color:#fff;
}
.select-options li{
    height:30px;
    line-height:30px;
    padding:0 12px;
    cursor:pointer;
    white-space:Nowrap;
}
.select-options li:hover{
    background-color:#f5f5f5;
}

以上代码中，首先给下拉框的外层容器（class为"select"）设置position:relative，以便让后面的绝对定位元素都以它为参考点。然后使用:before或:after伪元素来添加倒三角。在这里，我们通过设置一个空的content，然后用border来画出倒三角形状，最后再进行绝对定位。

对于下拉框的选项部分，我们再创建一个ul列表，通过绝对定位，并设置top值为下拉框的高度，left和right都为0，使其覆盖在下拉框下方。同时，每个选项都要设置高度和行高，以及hover时的背景颜色效果，让用户能够清晰地知道自己当前选择的项。

通过以上代码，我们就可以非常轻松地实现一个带倒三角的下拉框效果啦！