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