default
menu home
图标库 注册 登录 favorite_border message help_outline
在线笔记 - 人性化网络收藏夹

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

style分类标签: 全部 CSS html javascript php/other IT
by: demo  2023-05-20 13:49(UTC)

演 示

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

先上图看最终效果。

note_6_0.png

CSScontent_copy复制代码
.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%)
}
htmlcontent_copy复制代码
<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°改为需要的角度即可。

visibility 890


- 重度网络用户必备 在线笔记
adimg
logo 发表评论

captcha
请正确填写验证码
取 消