实现左上角类似标签效果

效果图:
在这里插入图片描述

<div class="content">
    <div class="t-right-new"><p>最新</p></div>
</div>

.content{
position: relative;
width: 150px;
height:150px;
margin: 30px auto;
background-color: white;
border: 1px solid red;
overflow: hidden;
}

.t-right-new {
position: absolute;
width: 100px;
height: 30px;
background-color: red;
color: white;
text-align: center;
transform: rotate(-40deg);
top: 6px;
left: -24px;
}

.t-right-new p {
font-size: 19px;
line-height: 30px;
margin: 0;
}

猜你喜欢

转载自blog.csdn.net/Ariel_201311/article/details/83015207