css表格右上角倾斜封页角（斜三角形）效果

最新推荐文章于 2025-10-09 15:26:33 发布

原创最新推荐文章于 2025-10-09 15:26:33 发布 · 3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用CSS和HTML实现封页角效果的方法，并展示了如何在数据表格的特定单元格中应用此效果，以突出显示满足特定条件的数据。

效果图：
在这里插入图片描述
代码如下：

<div class="box">
	<div class="box-con"></div>
</div>

<style>
  .box{
    width:74px;
    height:51px;
    position:relative;
    background: rgb(253,192,1);
    overflow: hidden;
  }
  .box .box-con{
    width:70px;height:70px;position: absolute;background: #e7093d;top:-50px;right:-50px;transform: rotate(45deg);
  }
</style>

用于项目中：
在这里插入图片描述
给列表中的第四列满足条件的数据添加封页角效果：

"createdRow" : function(row, data, index) {
	$(row).find("td").eq(4).css('cssText','background-color:rgb(253,192,1);vertical-align:middle;color:#fff;position:relative;overflow: hidden;');
		if (data.f_overlimited > 0) {
	        var div = $("<div>"); //创建div标签
	        div.attr("style","width:70px;height:70px;position: absolute;background: #e7093d;top:-55px;right:-50px;transform: rotate(45deg);");
	        $(row).find("td").eq(4).append(div);
		}
}