在线笔记 favinavi - 人性化网络收藏夹

CSS实现倾斜绶带式45°标签

分类标签：全部 CSS html javascript php/other IT

by: demo 2023-05-20 13:49(UTC)

有时候页面需要在某个元素上设置一个醒目的标志，比如“审核中”、“热卖中”、“HOT”等等，此时本样式比较合适。

先上图看最终效果。

CSS复制代码

.boxWrap{
	margin:8px;box-sizing:border-box;display:grid;grid-auto-flow:row;gap:16px 0.5%;grid-template-columns:repeat(3,33%);
}

.box{
	position:relative;overflow:hidden;box-sizing:border-box;padding:20px 20px 4px 20px;
	margin:8px;min-width:280px;border-radius:6px;box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
}

.hot{
	top:8px;right:-24px;width:90px;height:28px;line-height:28px;transform:rotate(45deg);
	text-align:center;background:#f00;color:#fff;position:absolute;opacity:0.7;
	border-bottom:solid 1px #666;box-shadow:0 0 4px 2px rgb(0 0 0 / 35%)
}

html复制代码

<div class='boxWrap'>
	<div class='box'>
		演示用div，为了避免部分内容被绶带完全遮盖，绶带设置了一点透明度。<br/>
		<br/><br/><br/>
		<br/><br/><br/>
		<br/><br/>
		<div class='hot'>hot</div>
	</div>
</div>

其中，倾斜角度可根据需要调整，把transform:rotate(45deg);中的45°改为需要的角度即可。

1886

favinavi - 重度网络用户必备在线笔记

家用服务器proxmox 7.3开启samba共享目录
大家知道，proxmox本身是debian系统，所以直接在debian系统安装samba服务即可开启共享，windows和linux、android、macOS...
网络收藏夹的正确打开方式是怎样的？
有人会说：这算哪门子问题，网络收藏夹不就是一个普通网站吗？普通网站怎么打开，你网络收藏夹就怎么打开呗！嗯...这么说当然没错，但是，但是！网络收藏夹毕竟是一...
javascript捕获缺省的组合快捷键，比如CTRL+F
有时候我们需要在网页上捕获用户的按键动作，然后避免执行缺省动作，替换成我们想要执行的程序。下面我们以拦截并接管“ctrl+f”组合键为例，代码如下：
CSS学习心得：多行文本两端对齐，同时溢出部分自动截断并添加省略号...
在卡片列表式页面展示文章内容时，除文章标题外，经常需要显示文章简介。简单粗暴的做法就是只显示文章的开始部分内容，这时就会要求简介部分固定高度，不能超出，同时尤其...
一个使用CSS/HTML将图像自适应屏幕的示例
在这个示例中，我们将图像的最大宽度设置为100%，并将高度设置为自动。此外，我们还添加了一个样式，以使图像居中于其容器元素中。这将确保图像在不同大小的屏幕上都能...
更全面匹配UTF-8中文汉字的正则表达式
网上搜索得到的匹配汉字的正则表达式有一部分并不全面，只匹配了Unicode字符集中\u4E00-\u9FA5范围，并不包含\uF900-\uFA2D这些后期添加...