How can I make a responsive menu with diagonal grid in CSS? - html

Question

i am creating a template for a website. there i want to create a menu like this
I found the below code as a solution
but I can't get the div to divided into 4 parts and add the text in a responsive way. Can do it using position:absolute, but the it is not responsive. How can I achieve this using css in a responsive way?
.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

You can use CSS Flexbox & CSS Transform properties to achieve this. Have a look at the snippet below:
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">
Bussiness
</li>
<li class="item">
Team
</li>
<li class="item">
Talent
</li>
<li class="item">
Group
</li>
</ul>
</div>
Hope this helps!

Answer 2

You can use pseudo elements like before and after. Kindly review the updated answer. Hope it is helpful to you.
.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>

Answer 3

Please check the below code. You can implement your requirement in the same way. I have added <span> tags to show the text.
.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/