Css旋转平行四边形与文本

Question

我有以下css代码片段用于创建一个内部带有文本的对角线框。我希望顶部看起来平坦（平行四边形），但保持对角线性质。

.diagonalTextBox {
color: black;
background-color: #fff;
width:50px;
height:20px;
position: absolute;
transform:rotate(-45deg);
-ms-transform:rotate(-45deg); /* IE 9 */
-webkit-transform:rotate(-45deg); /* Opera, Chrome, and Safari */
}

Answer 1

你可以试试这个：

-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
-ms-transform: skew(20deg);

但这也会扭曲文字......