Как создать адаптивное меню с диагональной сеткой в ​​CSS? ⇐ CSS

[Anonymous]

Я создаю шаблон для сайта. там я хочу создать такое меню



Я нашел приведенный ниже код в качестве решения

но я не могу разделить div на 4 части и добавить текст в адаптивном формате. способ. Можно сделать это, используя позицию: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;
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/467 ... rid-in-css