css正方形菜单 |css 字体取消斜体

/* HTML代码 */
选项1选项2选项3选项4选项5
/* CSS样式 */
.menu {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.menu a {
display: block;
width: 150px;
height: 150px;
margin: 20px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 150px;
transform: translateX(-50%) translateY(-50%) rotate(45deg);
transition: all 0.3s ease-in-out;
}
.menu a:before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(255,255,255,0.1);
transform: translateX(-50%) translateY(-50%) rotate(-45deg);
transition: all 0.3s ease-in-out;
z-index: -1;
}
.menu a:hover {
transform: translateX(-50%) translateY(-50%) rotate(0deg);
background-color: #fff;
color: #333;
}
.menu a:hover:before {
background-color: rgba(0,0,0,0.1);
}

在上面的代码中，大家先创建了一个包含多个选项的div，然后将其设置为flex布局。每个选项都是一个a标签，设置了宽度、高度、背景色和其他样式。关键在于使用了transform属性进行了旋转和平移，把菜单项变成正方形。

另外，为了让菜单项在鼠标悬停时有一个平滑的过渡效果，大家使用了transition属性。通过设置:hover伪类来修改菜单项的样式，同时也修改了伪元素的样式（即菜单项的背景色）。这样就可以创建出一个漂亮的正方形菜单了。