兩個自舉列，其中一個有對角線邊緣

我試圖在這個jsfiddle的bootstrap中製作一個傾斜/對角邊緣的菜單。雖然它有點作品，我不喜歡div如何仍然可以用鼠標滾動（儘管不在jsfiddle中）。兩個自舉列，其中一個有對角線邊緣

這是由容器div上的overflow-y: hidden;屬性引起的。我用它來隱藏我的.slope div上多餘的邊框。我無法設置任何靜態高度值，因爲我的內容是動態的。

這讓我想知道是否有更好的方法來實現這個結果。

HMTL

<div class="container"> 
    <div class="row"> 
    <div class="menu col-xs-4"> 
     <ul> 
     <li>1. item</li> 
     <li>2. item</li> 
     <li>3. item</li> 
     <li>4. item</li> 
     </ul> 
    </div> 
    <div class="content col-xs-8"> 
     some content 
     <div class="slope"></div> 
    </div> 
    </div> 
</div>

CSS

.menu { 
    background-color: lightblue; 
} 

.slope { 
    height: 0; 
    border-bottom: 1000px solid lightblue; 
    border-right: 500px solid transparent; 
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: 0; 
} 

.container { 
    overflow-y: hidden; 
}

來源

2016-10-14 Fester

你在哪裏得到滾動 – Sasikumar

沒看到哪個瀏覽器滾動 – Sasikumar

@Sasikumar鉻V53。請注意：我沒有要求解決滾動的方法，我正在尋求另一種方法來實現相同的結果 – Fester

而且像這樣的東西嗎？

.menu { 
    background-color: lightblue; 
    overflow: hidden; 
} 

.menu:after { 
    content: ""; 
    border-bottom: 1000px solid lightblue; 
    border-right: 500px solid white; 
    position: absolute; 
    left: 80%; 
    top: 0; 
}

Jsfiddle

來源

2016-10-14 13:01:58 mchev

兩個自舉列，其中一個有對角線邊緣

回答

相關問題