1. 程式人生 > >實現左上角類似標籤效果

實現左上角類似標籤效果

效果圖:
在這裡插入圖片描述

<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; }