1:需求图: 手绘下拉框 带三角
2:网上查了一些例子,但都是实心的, 可参考,如图:
(原链接: https://blog.csdn.net/qq_33463449/article/details/113375804)
3:简洁版的:
a: 实心:
javascript
<view class="angle"/>
css
.angle{
width:0;
height:0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #000;
}
b: 空心:
javascript
<view class="angle"/>
css
.angle {
position: fixed;
top:60upx;
right: 50upx;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-top-width: 0;
border-bottom-color: #DFB1B3;
border-width: 20upx;
}
.angle::after{
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
content: "";
border-width: 20upx;
top:1px;
margin-left: -20upx;
border-top-width: 0;
border-bottom-color: #fff;
}
// 1px=2upx
我的页面代码
到此完美结束, 希望对你有所帮助 !