图片左上角加角标

最新推荐文章于 2023-10-17 10:13:39 发布

lyk_dtf

最新推荐文章于 2023-10-17 10:13:39 发布

阅读量429

点赞数 1

分类专栏：认真写博客前端文章标签：前端 css

本文链接：https://blog.csdn.net/lyk520dtf/article/details/126662959

版权

认真写博客同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

用到了，记录一下

主要就是用超出隐藏加旋转
overflow: hidden;
transform: rotate(45deg) translateX(0) translateZ(0);

废话不多说，直接上代码

<html>
	<div class="wrap">
		<img width="200" height="200" src="https://img0.baidu.com/it/u=3537271450,3769261761&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=427"></img>
		
		<div class="test">
			<span class="txt">API</span>
		</div>
	</div>

</html>

<style>
	.test {
		width: 5rem;
		height: 5rem;
		background-color: #009688;
		position: absolute;
		top: -2.5rem;
		left: -2.5rem;
		transform: rotate(45deg) translateX(0) translateZ(0);

	}
	
	.txt{
		color: white;
		position: absolute;
		bottom: 1.5625rem;
		right: 0px;
		text-align: center;
		transform: rotate(-90deg) translateX(0) translateZ(0);
		
	}


	.wrap {
		position: relative;
		top: 6.25rem;
		left: 10.25rem;
		overflow: hidden;
	}
</style>