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