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

我的页面代码


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

相关推荐
zhanshuo9 分钟前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang10 分钟前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
khalil12 分钟前
基于 Vue3实现一款简历生成工具
前端·vue.js
拾光拾趣录19 分钟前
浏览器对队头阻塞问题的深度优化策略
前端·浏览器
用户81221993672219 分钟前
[已完结]后端开发必备高阶技能--自研企业级网关组件(Netty+Nacos+Disruptor)
前端
万少24 分钟前
2025中了 聊一聊程序员为什么都要做自己的产品
前端·harmonyos
abigale032 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者3 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile3 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639973 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫