transform对span无效果

想要通过transform实现类似图中效果

<div>
    <span>个人报表</span>
</div>

div{
    width:80px;
    text-align:center;
    border:1px solid #b5b5b5;
    transform:skew(-30deg);
}
span{
    transform:skew(30deg);
}

结果文字依然是倾斜的

查看CSS参考手册，transform适用于：所有块级元素及某些内联元素。

更改span样式，将其改为内联块状元素：

span{
    display:inline-block;
    transform:skew(-30deg);
}

得到想要的效果

查看W3C规范：

transformable element
A transformable element is an element in one of these categories:

• an element whose layout is governed by the CSS box model which is
  either a block-level or atomic inline-level element, or whose display
  property computes to table-row, table-row-group, table-header-group,
  table-footer-group, table-cell, or table-caption

所以transform对inline的元素都是不起作用的。