.tagRight {
display: inline-block;
height: 20px;
width: 200px;
background: #f00;
text-align: center;
margin-top: 40px;
margin-left: -45px;
text-decoration: none;
color: #fff;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
<div style="" v-for="item in list"
<div class="tagRight"> 测试</div>
</div>
然后根据自己需求微调 实现步骤是先做一个水平长条,使用CSS3的transform来实现旋转,如果是在左上角的话就逆时针旋转45度,右上角顺时针旋转45度。