html - css中的平行四边形形状

这个问题已经有了答案：
How to use skew only in the parent element?
4个答案
我想用css中的平行四边形做一个标题菜单背景。
问题是我的标题菜单文本也显示在平行四边形样式。我希望我的文本样式是直/普通的。
这是我的css代码：

.nav-bg{
   background-color:rgba(2,2,2,0.9);
   float:left;
    Skew
   -webkit-transform: skew(-60deg);
   -moz-transform: skew(-60deg);
   -o-transform: skew(-60deg);
   transform: skew(-60deg);
}
<div class="nav-bg">
         <ul class="nav navbar-nav"><li>test</li></ul>
</div>

请告诉我任何解决办法。

最佳答案

body{
    margin: 30px 150px;
}

.nav-bg {
    width: 150px;/*for example*/
    height: 150px;/*for example*/
    background-color:rgba(2, 2, 2, 0.9);
    -webkit-transform: skew(-60deg);
       -moz-transform: skew(-60deg);
         -o-transform: skew(-60deg);
            transform: skew(-60deg);
}
.nav-bg ul{
    color: #fff;
    -webkit-transform: skew(60deg);
       -moz-transform: skew(60deg);
         -o-transform: skew(60deg);
            transform: skew(60deg);
}

<div class="nav-bg">
    <ul class="nav navbar-nav">
        <li>test</li>
    </ul>
</div>