三角形角标示例

最新推荐文章于 2023-09-18 19:57:26 发布

lanying100

最新推荐文章于 2023-09-18 19:57:26 发布

阅读量441

点赞数

分类专栏：工作随笔文章标签： css javascript html

本文链接：https://blog.csdn.net/lanying100/article/details/123082766

版权

工作随笔专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!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，然后可以通过上下键调整角度，左侧实时查看效果。

lanying100

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三角形角标示例

三角形角标1.伪元素绘制矩形，绝对定位控制其居于右上角2.渐变色实现三角形效果。background: linear-gradient(34deg, transparent 50%, red 50%); /* 角度需要根据伪元素的宽高比计算得出：arctan(35/50)≈35°*/
复制链接

扫一扫