Как сделать меню от = до x в CSS ⇐ CSS

[Anonymous]

Я новичок в веб-разработке, и я работал над дизайном Figma, где мне нужно было создать такое меню = изображение меню (первое изображение ниже) to x изображение перекрестного меню (второе изображение ниже):


[img]https:// i.sstatic.net/zCfpdJ5n.png[/img]

Ниже приведен мой код. Согласно этому коду CSS я могу преобразовать его в перекрестный, но он не выравнивается должным образом. Вот изображение моего перекрестного и равного меню, равное изображение меню и изображение перекрестного меню.

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

header {
background-color: #000000;
width: auto;
height: 114px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
/* font-size: calc(10px + 2vmin); */
padding: 0px 40px;
}

.logo {
width: auto;
height: auto;
}

/* .hamburger {
width: auto;
}

.line {
width: 44px;
border: 2px solid #ffffff;
border-radius: 10px;
} */

.hamburger {
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
/* Adjust gap for better spacing */
width: 44px;
height: 44px;
text-align: center;
}

.line {
width: 100%;
height: 4px;
/* Thickness of the lines */
text-align: center;
background-color: #ffffff;
/* Color of the lines */
border-radius: 10px;
transition: all 0.3s ease;
/* Smooth transition */
position: relative;
/* Position relative for absolute positioning of lines */
}

.hamburger.active .line1 {
transform: rotate(45deg) translate(5px, 5px);
/* Rotate and move the first line */
}

.hamburger.active .line2 {
transform: rotate(-45deg) translate(5px, -5px);
/* Rotate and move the second line */
}

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

[img]{LogoSvg} alt=[/img]





Theme

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