default
menu home
Icon library Sign up Login favorite_border message help_outline
Online notes - online bookmark

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

styleTags: All CSS html javascript php/other IT
by: demo  2023-05-20 13:49(UTC)

Demo

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

先上图看最终效果。

note_6_0.png

CSScontent_copyCopy codes
.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_copyCopy codes
<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 1000


- for heavy web user Online notes
adimg
logo Post a comment

captcha
Please check the captcha code
Cancel