用到了，记录一下
主要就是用超出隐藏加旋转
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>
效果图
