利用transform和border 创造简易图标，以适应uniapp中多字体大小情况下的符号问题

天海奈奈

已于 2023-09-14 08:49:25 修改

阅读量847

点赞数 1

文章标签： css html 前端 uni-app

于 2023-09-14 08:49:08 首次发布

本文链接：https://blog.csdn.net/weixin_57169969/article/details/132738173

版权

html:

<text class="icon-check"></text>

css:

	.icon-check {
		border: 2px solid black;
		border-left: 0;
		border-top: 0;
		height: 12px;
		width: 6px;
		transform-origin: center;
		transform: rotate(45deg);
	}

实际上就是声明一个带边框的div 将其中相邻的两边去掉再通过设置两边的边长差来改变夹角，比较适合用来显示对钩符号。

因为uni-app的page-meta再加上插件postcss-px-to-viewport插件可以将页面中的px/rpx进行大小动态设置，此处的px就可以随着全局变量中的字体大小一起进行变化，当想设计一个大小不随着全局变量变化的符号时将其换成rpx即可（postcss-px-to-viewport配置文件中可以生命将px进行转换还是将rpx进行转换）。