div
// css
.label-parent{
position: relative;
border-radius: 14px;
overflow: hidden;
}
.label-child{
position: absolute;
width: 220px;
height: 24px;
text-align: center;
left: -14px;
top: -14px;
line-height: 24px;
background-color: #009B95;
border-color: #1D7471;
color: #fff;
transform: rotate(-45deg);
}
// html
<div class="label-parent">
<div class="label-child">額鵝鵝鵝</div>
</div>
svg
// html
<div class="label">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g>
<rect width="220" height="24" style="stroke-width:1;stroke:#1D7471;fill:#009B95;color:#fff">
</rect>
<text x="70" y="17" font-size="14" fill="#fff" style="letter-spacing: 3px;"> 額鵝鵝鵝</text>
</g>
</svg>
</div>
// css
.label {
position: absolute;
transform: rotate(-45deg);
top: -14px;
left: -14px;
}
效果圖.png
這里有個問題就是svg的方式玫恳，文字沒想好怎么水平垂直居中.
