不规则背景墙 CSS实现背景图片不规则的导航菜单

当我们需要实现一个不规则形状的背景墙或者导航菜单时，可以使用CSS中的clip-path属性和polygon函数来实现。具体步骤如下：

1.创建一个包含所有导航链接的容器。在此容器中添加多个链接，每一个链接代表一个导航项。

2.为每个导航链接设置背景图片，并将其设置为当前导航项的背景图片。

3.使用CSS clip-path属性和polygon函数为导航链接元素创建不规则形状。

4.添加必要的样式以确保不规则形状的边缘与其他元素对齐。

下面是两个示例说明：

示例一：

HTML代码：

<div class="menu">
    <a href="#" class="link link1">Home</a>
    <a href="#" class="link link2">Services</a>
    <a href="#" class="link link3">About</a>
    <a href="#" class="link link4">Contact</a>
</div>

CSS代码：

.menu {
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    width: 100%;
}

.link {
    width: 25%;
    padding: 20px;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    background-color: #000;
    transition: all 0.3s ease-in-out;
    -webkit-clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
    clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
}

.link:hover {
    background-color: #555;
}

在此示例中，我们使用了clip-path属性和polygon函数为每个导航链接创建了不规则的形状。我们还在容器上使用了overflow:hidden属性来确保不规则形状不会超出容器的范围。

示例二：

HTML代码：

<div class="menu">
    <a href="#" class="link link1">Home</a>
    <a href="#" class="link link2">Services</a>
    <a href="#" class="link link3">About</a>
    <a href="#" class="link link4">Contact</a>
</div>

CSS代码：

.menu {
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    width: 100%;
    background-image: url('https://images.unsplash.com/photo-1614526614384-ec8ba73a401f?ixlib=r...');
    background-size: cover;
    background-position: center;
}

.link {
    width: 25%;
    padding: 20px;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease-in-out;
    -webkit-clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
    clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
}

.link:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

在此示例中，我们将背景图像设置为容器的背景图片，并在每个导航链接上使用clip-path属性和polygon函数创建了不规则的形状。我们还在背景图片上添加了一个半透明的黑色遮罩，以使导航链接更加显眼。