css 实现凹凸不规则的形状

要实现凹凸不规则的形状，可以使用CSS的clip-path属性。clip-path属性用于裁剪元素的形状。

以下是一个示例，在这个示例中，我们使用clip-path属性创建了一个凹凸不规则的形状：

HTML代码：

<div class="shape"></div>

CSS代码：

.shape {
  width: 200px;
  height: 200px;
  background-color: #f00;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

在这个示例中，我们使用了polygon()函数来创建一个多边形形状。polygon()函数接受一系列点的坐标作为参数，每个点由横坐标和纵坐标组成，中间用空格隔开。在上面的代码中，我们定义了四个点，它们分别位于元素的顶部中央、右侧中央、底部中央和左侧中央，这样就创建了一个凹凸不规则的形状。

您也可以使用其他函数，例如inset()函数、circle()函数、ellipse()函数、path()函数等来创建不同形状的裁剪区域。

相关问题

vue镂空凹凸的底部导航栏

Vue镂空凹凸的底部导航栏是一种常见的UI设计风格，它通过使用不同的背景颜色和形状来突出显示导航栏的选中状态。通常，底部导航栏由多个导航项组成，每个导航项都有一个图标和一个文本标签。

在Vue中实现镂空凹凸的底部导航栏可以通过以下步骤：
1. 创建一个Vue组件来表示底部导航栏，可以使用`<router-link>`组件来实现导航功能。
2. 使用CSS样式来设置底部导航栏的背景颜色和形状。可以使用`border-radius`属性来设置凹凸效果，使用`box-shadow`属性来设置阴影效果。
3. 使用Vue的动态绑定功能来实现选中状态的切换。可以通过给选中的导航项添加一个特定的CSS类来改变其样式。

以下是一个简单的示例代码：

<template>
  <div class="bottom-nav">
    <router-link to="/" class="nav-item" :class="{ active: activeTab === 'home' }">
      <i class="icon-home"></i>
      <span>首页</span>
    </router-link>
    <router-link to="/category" class="nav-item" :class="{ active: activeTab === 'category' }">
      <i class="icon-category"></i>
      <span>分类</span>
    </router-link>
    <router-link to="/cart" class="nav-item" :class="{ active: activeTab === 'cart' }">
      <i class="icon-cart"></i>
      <span>购物车</span>
    </router-link>
    <router-link to="/profile" class="nav-item" :class="{ active: activeTab === 'profile' }">
      <i class="icon-profile"></i>
      <span>个人中心</span>
    </router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'home' // 默认选中的导航项
    };
  }
};
</script>

<style>
.bottom-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  border-top: 1px solid #ccc;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  color: #999;
}

.nav-item.active {
  color: #333;
}

.icon-home,
.icon-category,
.icon-cart,
.icon-profile {
  /* 设置导航项的图标样式 */
}

</style>