如何使用CSS中的對角線網格製作響應式菜單？

我正在爲網站創建模板。在那裏，我想創建這樣如何使用CSS中的對角線網格製作響應式菜單？

一個菜單，我發現下面的代碼作爲一種解決方案

，但我不能獲得股利分爲4個部分，並以快速響應的方式添加文本。可以使用position:absolute，但它沒有響應。我如何以響應的方式使用css來實現這一點？

.background { 
 
    background-color: #BCBCBC; 
 
    width: 100px; 
 
    height: 50px; 
 
    padding: 0; 
 
    margin: 0 
 
} 
 

 
.line1 { 
 
    width: 112px; 
 
    height: 47px; 
 
    border-bottom: 1px solid red; 
 
    -webkit-transform: translateY(-20px) translateX(5px) rotate(27deg); 
 
    position: absolute; 
 
    /* top: -20px; */ 
 
} 
 

 
.line2 { 
 
    width: 112px; 
 
    height: 47px; 
 
    border-bottom: 1px solid green; 
 
    -webkit-transform: translateY(20px) translateX(5px) rotate(-26deg); 
 
    position: absolute; 
 
    top: -33px; 
 
    left: -13px; 
 
}

<div class="background"> 
 
    <div class="line1"></div> 
 
    <div class="line2"></div> 
 
</div>

來源

2017-10-16 pavithra rox

您可以將它作爲2 * 2網格的普通盒子，只有內部邊框到4格，然後旋轉它們45deg –

是否有必要在移動視圖中使設計保持一致？我們不能將其更改爲在移動設備上列出視圖嗎？ –

您可以使用CSS Flexbox的 & CSS變換屬性來實現這一目標。看看下面的代碼片段：

body { 
 
    padding: 20px; 
 
} 
 

 
.menu-cover { 
 
    width: 360px; 
 
    height: 360px; 
 
    overflow: hidden; 
 
    background: #eee; 
 
} 
 

 
.menu { 
 
    list-style: none; 
 
    margin: -70px 0 0 -70px; 
 
    padding: 80px; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: calc(600px - 100px); 
 
    height: calc(600px - 100px); 
 
    position: relative; 
 
    transform: rotate(45deg); 
 
    transform-origin: center; 
 
} 
 

 
.menu:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    width: 1px; 
 
    height: 100%; 
 
    background-color: #aaa; 
 
} 
 

 
.menu:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 0; 
 
    transform: translateY(-50%); 
 
    width: 100%; 
 
    height: 1px; 
 
    background-color: #aaa; 
 
} 
 

 
.item { 
 
    width: 50%; 
 
} 
 

 
.item a { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    transform: rotate(-45deg); 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="menu-cover"> 
 
    <ul class="menu"> 
 
    <li class="item"> 
 
     <a href="#">Bussiness</a> 
 
    </li> 
 
    <li class="item"> 
 
     <a href="#">Team</a> 
 
    </li> 
 
    <li class="item"> 
 
     <a href="#">Talent</a> 
 
    </li> 
 
    <li class="item"> 
 
     <a href="#">Group</a> 
 
    </li> 
 
    </ul> 
 
</div>

希望這有助於！

來源

2017-10-16 08:03:21

不錯的解決方案，但沒有響應。 – Roberrrt

謝謝你。這工作。但沒有迴應。關於那件事情的不幸。 –

請檢查下面的代碼。您可以用相同的方式實現您的需求。我已添加<span>標籤以顯示文字。

.background { 
 
    background-color: #BCBCBC; 
 
    width: 100px; 
 
    height: 50px; 
 
    padding: 0; 
 
    margin: 0 
 
} 
 

 
.line1 { 
 
    width: 112px; 
 
    height: 47px; 
 
    border-bottom: 1px solid red; 
 
    -webkit-transform: translateY(-20px) translateX(5px) rotate(27deg); 
 
    position: absolute; 
 
    /* top: -20px; */ 
 
} 
 

 
.line2 { 
 
    width: 112px; 
 
    height: 47px; 
 
    border-bottom: 1px solid green; 
 
    -webkit-transform: translateY(20px) translateX(5px) rotate(-26deg); 
 
    position: absolute; 
 
    top: -33px; 
 
    left: -13px; 
 
}

<div class="background"> 
 
    <span style="float:left;padding-left:20%">Business 
 
    </span> 
 
    <span style="float:left;padding-left:5%">Team 
 
    </span> 
 
    <span style="float:right;padding-left:5%">Talent 
 
    </span> 
 
    <span style="float:left;padding-left:20%">Group 
 
    </span> 
 
    <div class="line1"></div> 
 
    <div class="line2"></div> 
 
</div>

https://jsfiddle.net/t3z8q2k4/

來源

2017-10-16 07:57:35

請不要使用只有鏈接的答案，因爲鏈接可能停止，您的答案將徒勞無益。另外，這不響應 – Roberrrt

您可以使用僞元素，如before和after。請檢閱最新的答案。希望對你有所幫助。

.background { 
 
    background-color: #BCBCBC; 
 
    width: 100px; 
 
    height: 100px; 
 
    padding: 0; 
 
    margin: 0; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.background:before { 
 
    width: 1px; 
 
    height: 500px; 
 
    background :red; 
 
    -webkit-transform: rotate(45deg); 
 
    position: absolute; 
 
    content:''; 
 
    left: 0; 
 
    right: 0; 
 
    margin:-200px auto 0; 
 
} 
 

 
.background:after { 
 
    width: 1px; 
 
    height: 500px; 
 
    background :green; 
 
    -webkit-transform: rotate(-45deg); 
 
    position: absolute; 
 
    content:''; 
 
    left: 0; 
 
    right: 0; 
 
    margin:-200px auto 0; 
 
}

<div class="background"> 
 
</div>

來源

2017-10-16 07:58:58

這不響應。 – Roberrrt

如何使用CSS中的對角線網格製作響應式菜單？

回答

相關問題