css - 如何控制旋转元素内元素的CSS旋转？

Question

我想在一些列表元素中插入一些字形，我希望方形列表元素的旋转为 -45°，但内部链接要保持其度数处于正常状态，我该怎么做这里是一个示例我到目前为止的工作example

代码在这里:HTML:

<ul>
    <li><a href="#">A</a></li>
    <li><a href="#">B</a></li>
    <li><a href="#">C</a></li>
</ul>

CSS:

ul {
list-style:none;}

ul > li {
float:left;
margin:0 12px;
background: #DDD;
padding:10px 14px;
-ms-transform: rotate(-45deg); 
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);}

ul > li > a {
text-decoration:none;}

Answer 1

请看 fiddle https://jsfiddle.net/nileshmahaja/rhmwqyaf/1/

我刚刚更改了 anchro 标签元素的 css 样式，如下所示

ul > li > a {
    text-decoration:none;
    -ms-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    display:block;
}