響應傾斜的邊框

我已經創建了一個使用邊界在導航項上使用的斜型三角形，但用於定義斜面長度的邊框是固定的，它需要根據列表項中的內容進行調整。我也想爲每個列表項目使用相同的CSS類。響應傾斜的邊框

這是我想要實現的最佳解決方案嗎？還是存在具有相同結果的替代方法？

我也接受JS解決方案。

我已經使用了下面的CSS迄今：

li { 
    float: left; 
    position: relative; 
    height: 20px; 
    background: #a1a8ad; 
    padding: 5px 12px; 
    margin-right: 10px; 
    list-style: none; 
} 

li:before { 
    content: ""; 
    position: absolute; 
    top: -3px; 
    width: 0; 
    height: 1px; 
    left: 0px; 
    border-right: 63px solid #a1a8ad; /* razorblade color */ 
    border-top: 2px solid rgba(0, 0, 0, 0); /* transparent */ 
}

JSFiddle here

來源

2014-12-30 automonous

如何你想你的輸出你可以發佈一些圖像設計你想要什麼 –

沒有這樣的事情作爲響應邊界，除非你使用JS。 – Slime

@sanojlawrence我想要實現的輸出是在這[JSFiddle]（http://jsfiddle.net/xyum0c5z/7/）中，對不起，我應該讓它更清晰一點。 – automonous

不能使用百分比的邊框寬度，但你可以使用一個旋轉的僞元素，使傾斜的上邊框：

li { 
 
    float: left; 
 
    position: relative; 
 
    margin-right: 10px; 
 
    list-style: none; 
 
    overflow: hidden; 
 
    padding-top: 8px; 
 
} 
 
li a { 
 
    display: block; 
 
    background: #a1a8ad; 
 
    padding: 5px 12px; 
 
    color: #000; 
 
    height: 20px; 
 
    text-decoration: none; 
 
} 
 
li:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 150%; 
 
    height: 30px; 
 
    background: #a1a8ad; /* razorblade color */ 
 
    -webkit-transform-origin: 100% 0; 
 
    -ms-transform-origin: 100% 0; 
 
    transform-origin: 100% 0; 
 
    -webkit-transform: rotate(-2deg); 
 
    -ms-transform: rotate(-2deg); 
 
    transform: rotate(-2deg); 
 
    z-index: -1; 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="#">Home</a> 
 
    </li> 
 
    <li><a href="#">About Us</a> 
 
    </li> 
 
    </ul> 
 
</nav>

來源

2014-12-30 14:16:18

僞效應是deffo要走的路。 – jbutler483

這是完美的，謝謝！我會再次投票，一旦我得到7更多的代表:) – automonous

響應傾斜的邊框

回答

相關問題