CSS skewX屬性導致基礎下拉菜單的問題

Question

我試圖tskew菜單項的頂層[成功] - 我設法使李和標籤排隊正確，但ul.dropdown彈出在文檔元素的其餘部分，它的方式向右偏移 - 每個下拉列表有不同的偏移量。它似乎已經應用了一些透明度。

小提琴是在這裏：https://jsfiddle.net/acto8k5y/5/

• 你要打開的小提琴寬足以看出無響應菜單
• 所有的自定義菜單CSS是在CSS面板的最底部

這是我在用的只是歪斜部分：

.top-bar-section ul > li { 
    margin: 0 10px; 
    -webkit-transform: skew(30deg); 
    -moz-transform: skew(30deg); 
    -o-transform: skew(30deg); 
    } 


    .top-bar-section ul li > a { 
    -webkit-transform: skew(-30deg); 
    -moz-transform: skew(-30deg); 
    -o-transform: skew(-30deg); 
    } 

    .top-bar-section > ul > li .dropdown { 
    -webkit-transform: skew(-30deg); 
    -moz-transform: skew(-30deg); 
    -o-transform: skew(-30deg); 
    } 

這裏有什麼問題？

Answer 1

如果您有選擇地禁用子菜單ul上的反向歪斜，您會注意到ul與每個菜單項下方的彩色條對齊。似乎ul元素上的歪斜在元素底部具有變換原點，其效果是將其向右推到可見位置。

如果你想扭曲的唯一因素是每個菜單項下面的顏色欄，你可能會更好用僞元素替換歪斜transform的創建傘：

.top-bar-section .has-dropdown::before { 
    position: absolute; 
    bottom: -10px; 
    left: -10px; 
    display: inline-block; 
    content: ""; 
    width: 5px; 
    height: 5px; 
    border: 5px solid; 
    border-bottom-color: transparent; 
    border-left-color: transparent; 
} 
.top-bar-section .has-dropdown::after { 
    position: absolute; 
    right: -10px; 
    display: inline-block; 
    content: ""; 
    width: 5px; 
    height: 5px; 
    border: 5px solid; 
    border-top-color: transparent; 
    border-right-color: transparent; 
} 
.top-bar-section .health { 
    color: #00adeb; 
} 
.top-bar-section .family { 
    color: #3ab652; 
} 
.top-bar-section .community { 
    color: #f59334; 
} 
.top-bar-section .has-dropdown > a { 
    color: #000; 
} 

雖然CSS稍微複雜一些，它意味着有更少的轉換被疊加，並且也會減少客戶端瀏覽器的圖形負載。使用這個CSS，下拉菜單相對於原始菜單項定位。

查看https://jsfiddle.net/acto8k5y/6/。