CSS3 - 为垂直导航栏制作平行四边形片段

Question

我最近一直在学习一些 HTML5/CSS3/JS 和 jQuery 的一部分，所以在大多数情况下仍然是一个菜鸟，但试图制作一个导航栏，它是一堆垂直堆叠的平行四边形 block ，到目前为止只是一团糟这就是我为每个 block 所做的，但这使它们成为矩形，我希望将每个盒子的顶部推到上方以创建平行四边形外观:

.nav {
    background-color: blue;
    border: 1px solid black;
    border-radius: 3px;
    margin: 2px;
    text-align: center;
    font-family: Verdana;
    font-weight: bold;
    font-size: 1em;
    color: yellow;
    padding: 15px;
    cursor: pointer;
}

我看到了一些关于使用“transform: skew(xdeg)”的东西，但它似乎没有影响任何东西，也许我没有正确实现它？

Answer 1

你试过吗:

.nav {
 /*all your properties */
 transform: skew(30deg);
 -o-transform: skew(30deg); /* Opera */
 -ms-transform: skew(30deg); /* IE 9 */
 -webkit-transform: skew(30deg); /* Safari and Chrome */
}