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

我的页面代码


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

相关推荐
sjd_积跬步至千里1 天前
CSS实现文字横向无限滚动效果
前端
维他AD钙1 天前
前端基础避坑:3 个实用知识点的简单用法
前端
journs1 天前
micro-app微前端styled-components CSSOM模式 应用切换样式丢失问题
前端
呼啦啦小魔仙1 天前
elpis项目DSL设计分享
前端
李李记1 天前
别让 “断字” 毁了 Canvas 界面!splitByGrapheme 轻松搞定非拉丁文本换行
前端·canvas
来金德瑞1 天前
快速掌握 ProseMirror 的核心概念
前端
ygria1 天前
样式工程化:如何实现Design System
前端·前端框架·前端工程化
墨渊君1 天前
“蒙”出花样!用 CSS Mask 实现丝滑视觉魔法
前端·css
huabuyu1 天前
基于 React + MarkdownIt 的 Markdown 渲染器实践:支持地图标签和长按复制
前端
芦苇Z1 天前
HTML <a> 标签的 rel 属性全解析:安全、隐私与 SEO 最佳实践
前端·html