css3 不规则导航

CSS3不规则导航可以让网页设计更加独特和创新。基于CSS3的强大功能，不规则形状的导航菜单可以呈现出非常生动的效果。

nav {
  width: 800px;
  margin: 0 auto;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
nav li {
  margin: 10px;
  position: relative;
  width: 100px;
  height: 100px;
}
nav li a {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 20px;
  text-decoration: none;
  color: #fff;
}
nav li::before,nav li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  border: 20px solid transparent;
  border-top: 10px solid #3c8dbc;
}
nav li:hover::before,nav li:hover::after {
  bottom: -20px;
}
nav li:nth-child(1)::before,nav li:nth-child(1)::after {
  border-top-color: #8e44ad;
}
nav li:nth-child(2)::before,nav li:nth-child(2)::after {
  border-top-color: #27ae60;
}
nav li:nth-child(3)::before,nav li:nth-child(3)::after {
  border-top-color: #f39c12;
}

以上的CSS代码可以生成一个由三个不规则形状组成的导航菜单。在这段代码中，我们使用了flex布局来让导航项垂直居中，还用了伪元素和hover属性来实现动态效果。

CSS3不规则导航可以让设计师在网页设计中展现更多的创意和想象力，让网站更加生动和有趣。