Online notes favinavi - online bookmark

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

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

Demo

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

先上图看最终效果。

CSSCopy 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%)
}

htmlCopy 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°改为需要的角度即可。

1888

favinavi - for heavy web user Online notes

Ubuntu 22.04 live server更换亚马逊AWS的更新源
amzon亚马逊云AWS的更新源，即使在国内速度也基本可接受，其最大特点是软件丰富，常用软件包几乎没有找不到的。具体步骤如下：
明明做好了301跳转，为什么某些搜索引擎就是不来收录新站？
favinavi自己就遇到了这个问题，老域名www.favii.cn虽然已有十几年历史，积累了一些忠实粉丝，但是为了能更好的拓展发展空间，还是痛下决心启用了fa...
CSS3特效“喜欢/Like”动态按钮，一颗会跳动的心脏
纯css+svg实现，鼠标移上去心脏会有节律地跳动，适合用来做点赞按钮参考，或者学习css动画技巧。
使用CSS让大背景图片适应不同大小屏幕又一例
这个示例网页使用了一个较大的背景图片，并使用CSS的background-size属性和@media查询来确保这个图片在不同尺寸的终端屏幕上都能够自适应。在小于...
你的网站会有不请自来的访客吗？
做网站，做SEO，就是希望别人来访问，最欢迎的当然是真实用户，其次是各大搜索引擎的蜘蛛。但是，假如你是个站长，你真的了解都有谁来造访你的网站吗？有不请自来的吗？...
简洁有效地实现水平垂直双居中
同时实现水平和垂直方向双居中的方法网上有很多种，本人倾向于采用其中最简洁有效的方法来实现，具有比较好的通用性。具体实现的css代码如下：