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

最新推荐文章于 2024-03-26 13:53:43 发布

feifei_Tang

最新推荐文章于 2024-03-26 13:53:43 发布

阅读量2.8k

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/feifei_tang/article/details/100123707

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

<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);
		}
}