带文本的 Css 旋转平行四边形

Question

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

.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);

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