两种方式记录一个css 书签效果

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的方式，文字没想好怎么水平垂直居中.