在线笔记 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°改为需要的角度即可。

967

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

了解onenav
https://blog.xiaoz.org/archives/16772
CSS背景图片分割之大图小用
为了提高页面加载速度，我们往往需要把一些小图标合并成一个图片文件，然后采用图片分割的方法来呈现，这很容易实现，使用background-position来设定图...
现在还有哪些好用的网络收藏夹？
看到几年前有人问过这个问题，上网搜索一下，大概能找到以下几家，目前貌似都还能访问： 1、当然有这里—— favii人性化网络收藏夹，不过最近favii升级新版...
使用CSS让大背景图片适应不同大小屏幕又一例
这个示例网页使用了一个较大的背景图片，并使用CSS的background-size属性和@media查询来确保这个图片在不同尺寸的终端屏幕上都能够自适应。在小于...
为什么会做favinavi网络收藏夹网站？记录一下心路历程
记得最早是在2007年，那时工作需要，经常用浏览器上网查资料、访问工作网站等等。经常遇到一个问题，就是白天工作时看到一个网站的某篇文章很有用，在浏览器设为了书签...
CSS3+SVG实现的带音效、会抖动的小铃铛图标特效
非常真实的抖动效果，鼠标移上去还有叮当声哦... 点“演示”按钮体验一下。