如何使用CSS中的对角线网格制作响应式菜单？

Question

我正在为网站创建模板。在那里，我想创建这样

一个菜单，我发现下面的代码作为一种解决方案

，但我不能获得股利分为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>

Answer 1

您可以使用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>

希望这有助于！

Answer 2

请检查下面的代码。您可以用相同的方式实现您的需求。我已添加<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/

Answer 3

您可以使用伪元素，如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>