如何创建像导航栏一样的倾斜梯形

Question

我努力创造像导航栏这样的梯形但我无法成功。这就是它应该是这样的：

如果有人能够至少指出我正确的方向，我会非常感激。

编辑：找到解决方案。这是html

<ul class="slanted-tabs">
    <li>
      <a>Location</a>
    </li>
    <li>
      <a>Visit Types</a>
    </li>
  </ul>

和SCSS

.slanted-tabs {
position: relative;
margin-bottom: 0;
white-space: nowrap;
li {
    position: relative;
    display: inline-block;
    padding: 1.0em 2.5em 0.1em;
    color: inherit;
    text-decoration: none;
    z-index: 1;
    a {
        &.active {
            background: none;
        }
    }
    &:before {
        content: '';
        position: absolute;
        top: 0; 
        right: 0; 
        bottom: 0;
        left: 0;
        z-index: -1;
        border-bottom: none;
        background: #ddd;
        transform: perspective(5px) rotateX(2deg);
        transform-origin: bottom;
    }
}

}

Answer 1

没有简单的方法可以让CSS样式的元素倾斜。但是你可以利用一些技巧：

• 对标签或标签页面使用位图图像。这是＆＃34;经典＆＃34;方式，问题的解决方式。它还允许更复杂的标签边。
• 使用内嵌或外部的SVG图像（请参阅this tutorial）。这具有Bitmap图像的许多优点，除此之外，您的页面仍然可以缩放
• 使用旋转元素。 Css允许元素的旋转。您可以通过这种方式绘制just about everything。有人甚至用这种方式设计了一种字体。使用3d变换创建倾斜标签can be found here。
的示例

如果你想快速和肮脏，请选择第一个选项。