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

1889

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

网络收藏夹的正确打开方式是怎样的？
有人会说：这算哪门子问题，网络收藏夹不就是一个普通网站吗？普通网站怎么打开，你网络收藏夹就怎么打开呗！嗯...这么说当然没错，但是，但是！网络收藏夹毕竟是一...
What should the best web favorites look like?
What should the best web favorites look like? Let's clarify the premise of ...
使用favinavi网络收藏夹分享功能提高工作效率一例
favinavi人性化网络收藏夹提供了分享功能，就是用户可以将自己收藏、整理后的书签分享给自己的同学、同事或朋友等。在某地政府部门工作的一位领导（这里为了方...
我的酱香之路
一、男人喜欢喝点酒，是一件很正常的事。我其实并不太懂酒，也不算是酒鬼，平时在自己家里基本不喝酒。现在，假如可以选择，那么我只喝酱香酒。咱们中国人，一般来说...
无法明确指定大图的宽度width和height时，如何避免累计布局位移CLS?
累计布局偏移: Cumulative Layout Shift, 简称CLS，是一项web性能的重要指标，旨在避免页面渲染时，某些元素（比如图片、字体等）加载前...
CSS学习笔记：flex布局做出元素两端对齐效果
很久以前，还没有flex布局方法的时候，想要在同一行内的两个元素分两端左右对齐，应该使用float方法，左边的元素使用float:left; 右边的元素使用fl...