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

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风格的元素。但是您可以利用一些技巧：

• 使用位图图像作为选项卡或选项卡边。这是“经典”方式，即问题用来解决的方式。它还允许更复杂的标签边。
• 使用SVG图像（请参阅this tutorial）可以是内联或外联。这具有位图图像的许多优点，除此之外，您的页面仍然可以缩放
• 使用旋转的元素。 Css允许旋转元素。你可以这样画just about everything。有人甚至以这种方式设计了一种字体。使用3d变换创建倾斜标签can be found here的示例。

如果你想要快速和肮脏，采取第一个选项。