css绘制下拉框头部三角(分实心/空心)

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

我的页面代码


到此完美结束, 希望对你有所帮助 !

相关推荐
uhakadotcom9 分钟前
致新人:如何编写自己的第一个VSCode插件,以使用@vscode/vsce来做打包工具为例
前端·面试·github
流***陌14 分钟前
用工招聘小程序:功能版块与前端设计解析
前端·小程序
之恒君16 分钟前
typescript(tsconfig.json - esModuleInterop)
前端·typescript
夏天199516 分钟前
React:聊一聊状态管理
前端·javascript·react.js
李剑一18 分钟前
低代码平台现在为什么不行了?之前为什么行?
前端·面试
鹏多多18 分钟前
vue的监听属性watch的详解
前端·javascript·vue.js
用户422744812462120 分钟前
IndexDB 前端数据库
前端
然我21 分钟前
前端正则面试通关指南:一篇吃透所有核心考点,轻松突围面试
前端·面试·正则表达式
LFly_ice1 小时前
学习React-11-useDeferredValue
前端·学习·react.js
亮子AI1 小时前
【npm】npm 包更新工具 npm-check-updates (ncu)
前端·npm·node.js