Css 旋转平行四边形文字

Question

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

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

但这也会扭曲文本...