PSD转HTML项目中导航栏旋转边框效果实现失败，如何解决

问题原因 #

CSS transform 属性对display: inline的行内元素不生效，你给li设置了display: inline，这是旋转属性没起作用的核心原因。

解决方案 #

• 把li的display属性改为inline-block，transform即可正常生效
• 如果要实现导航栏斜切效果，也可以用transform: skew()属性替代rotate，更贴合常规倾斜导航的视觉需求
• 如果需要文字不跟随元素一起旋转/倾斜，可给li内部的文字套一层span标签，设置反向transform抵消形变即可

修正后代码示例 #

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 500px;
    height: 60px;
    float: right;
    background-color: #F3F3F3;
}
li {
    background-color: aqua;
    transform: rotate(-11deg);
    /* 修改display属性 */
    display: inline-block;
    /* 调整padding适配容器高度 */
    padding: 10px 40px;
    line-height: 40px;
}
/* 可选：文字不跟随旋转 */
li span {
    display: inline-block;
    transform: rotate(11deg);
}

<ul>
<li><span>1</span></li>
<li><span>2</span></li>
</ul>

是否需要改用图片实现 #

完全不需要。该效果用CSS实现成本极低，相比图片方案加载速度更快、适配性更好，后期调整文字、颜色、角度都无需重新切图，维护成本更低。

内容的提问来源于stack exchange，提问作者Devin