如何創建像導航欄這樣的傾斜梯形

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的示例。

如果你想要快速和骯髒，採取第一個選項。