使用纯css来实现斜标
效果如图
具体代码如下
<div class="my-special-label">
<div>
<div>人事变动</div>
</div>
</div>
/*外层容器*/
.my-special-label{
position: absolute;
right: 0
}
/*内层容器*/
.my-special-label > div {
width: 80px;
height: 60px;
overflow: hidden;
position: relative;
top: -18px;
right: 10px;
}
/*小横标*/
.my-special-label > div > div{
font: bold 12px Sans-Serif;
text-align: center;
text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
transform: rotate(45deg);
position: relative;
padding: 0px;
left: 17px;
top: 15px;
width: 80px;
background-color: #e47b7b;
background-image: linear-gradient(to top, #fd5656, #d60101);
color: #f7f7f7;
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
}
/*折叠角*/
.my-special-label > div > div:before {
left: 0;
}
.my-special-label > div > div:after {
right: 0;
}
.my-special-label > div > div:before, .my-special-label > div > div:after {
content: "";
border-top: 1px solid #c5053f;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
position: absolute;
bottom: -1px;
}
具体的详细。可以自己微调
附带一个浮标
<div style="position:absolute">
<div style="position: relative; width: 0px; height: 0px">
<div class="overtime_tab" style="top: -19px; left: -35px;">超时</div>
</div>
</div>
.overtime_tab {
position: relative;
width: 40px;
text-align: center;
line-height: 22px;
top: -19px;
border-radius: 1px 1px 4px 4px;
font-size: 13px;
color: white;
background-image: linear-gradient(to right, #ff0000, #d20101);
box-shadow: 0px 6px 3px #f2dada;
}