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

我最近一直在学习一些HTML5 / CSS3 / JS和jQuery的一部分，因此在大多数情况下仍然是菜鸟，但是尝试制作一个导航栏，该导航栏是一堆垂直堆叠的平行四边形块，到目前为止，只是弄乱了我对每个块都有什么，但这会使它们矩形化，我一直在寻找将每个框的顶部推到上方以创建平行四边形外观的方法：

.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）'的信息，但它似乎没有影响任何东西，也许我没有正确实现它？

最佳答案

你有没有尝试过：

.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 */
}

关于css - CSS3-为垂直导航栏制作平行四边形，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17636360/