Question

我刚刚学习了一些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）'的内容，但它似乎没有影响任何东西，也许我没有正确实现它？

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

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

1 个答案: