营养早餐 - 菱形导航菜单制作教程

#head_nav {
  text-align: center;
}

.diamond {
  display: inline-block;
  margin: 0 10px;
  transform: rotate(45deg) skew(30deg);
}

.diamond a {
  display: block;
  transform: skew(-30deg) rotate(-45deg);
  padding: 10px;
  background-color: #ccc;
  color: #fff;
  text-decoration: none;
}

.diamond:hover a {
  background-color: #333;
}

这样，ul元素就会被旋转和倾斜成菱形，并且链接文本也会相应地进行旋转和倾斜。你可以根据需要调整菱形的大小和样式。