css 用边框写下拉三角的实际应用

css 用边框写下拉三角的实际应用

我之前写类似于下图这种的下拉三角都是使用图片，今天看到了一种不同的写法，值得借鉴，在这里记录一下；

1. 看一下代码结构

	<navigator class='city'>北京</navigator>

2. 看一下 css 代码

.city{
    width: 142rpx;
    text-align: center;
    line-height: 92rpx;
    color: #d3b9a0;
    font-size: 29rpx;
}
.city::after{
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin-left: 5rpx;
    border-width: 10rpx 10rpx 0 10rpx ;
    border-style: solid;
    border-color: #d3b9a0 transparent transparent transparent;
}

说明

如上代码所示：这个三角是使用 ::after 写出来的

设置边框的宽度是10rpx，这样就组成了一个正方形；去掉下边框，是为了让这个小正方形的顶部是在中间；
边框的颜色：上边框的颜色是我们想显示的三角形的颜色，其余边框，颜色设为透明色：transparent