三角形角标示例

<!DOCTYPE html>
<html>
<head>
	<title>三角形角标Demo</title>
	<!-- 替换成自己的JQuery路径 -->
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<style>
		/* 给目标矩形添加基本样式 */
		#target{
			width:100px;
			height:50px;
			border:1px solid gray;
		}

		/* 【重要】通过伪元素after设置角标 */
		.triangleCornerMark::after{
			content: attr(data-cm-content);	/* 读取目标元素上data-cm-content属性的值,从而实现灵活设置内容 */
			display: block; 				/* 块级元素,让宽高属性生效 */
			width: 50px; 					/* 根据个人需要调整 */
			height: 35px;
			background: linear-gradient(34deg, transparent 50%, red 50%); /* 角度需要根据伪元素的宽高比计算得出:arctan(35/50)≈35°*/
			font-size: 14px;				/* 尺寸小于12px时无效,可结合scale实现更小的效果 */
			transform-origin: 50px 0px;		/* 设置缩放的原点。此处的50px和width相同,y为0px,即以伪元素自身右上角为原点 */
			transform: scale(0.8);
			position: absolute;				/* 绝对定位,使其居于目标元素右上角。注意,目标元素必须已定位(position不是默认值static) */
			top: 0px;
			right: 0px;
			z-index: 10;					/* 避免被其它层级的元素遮挡。该值可根据需要调整 */
			color: white;
			text-align: right;				/* 文字右对齐 */
		}
	</style>
</head>
<body>
	<div id="target"></div>
	<script>
		/**
		 * 给指定元素的右上角设置指定内容的角标
		 * @param ele 目标html元素
		 * @param text 角标的内容
		 * PS:该方法会给指定html元素ele设置定位为relative(如果该元素未定位)
		 */
		function genTriangleCornerMark(ele,text){
			if($(ele).css('position') === 'static'){
				$(ele).css('position','relative');
			}
			$(ele).addClass('triangleCornerMark').attr('data-cm-content',text);
		}

		/**
		 * 清除所有的角标
		 */
		function clearTriangleCornerMark(){
			$(".triangleCornerMark").removeClass("triangleCornerMark");
		}

		// 测试代码
		genTriangleCornerMark($("#target")[0], '测试');
	</script>
</body>
</html>

【致不喜欢三角函数的你】鼠标点击34deg,然后可以通过上下键调整角度,左侧实时查看效果。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值