1:需求图: 手绘下拉框 带三角
2:网上查了一些例子,但都是实心的, 可参考,如图:
(原链接: https://blog.csdn.net/qq_33463449/article/details/113375804)
3:简洁版的:
a: 实心:
<view class="angle"/>
.angle{
width:0;
height:0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #000;
}
b: 空心:
文章来源：https://www.toymoban.com/news/detail-811962.html
<view class="angle"/>
.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
我的页面代码
到此完美结束, 希望对你有所帮助 !文章来源地址https://www.toymoban.com/news/detail-811962.html
到了这里，关于css绘制下拉框头部三角(分实心/空心)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
