<nav> <div :class="{ 'menu-item': true, 'activity': index == selectMenuIndex }" v-for="(menuInfo,index) in menuList" :key="index" @click="handelMenuClick(index)" >{{ menuInfo.title }}</div> </nav>
类似于谷歌浏览器的tab,,横向方向圆角样式:
:root { font-size: 8px; --radius-size:4px; --acticity-color:black; } .menu-item { color: white; padding: 0.5rem 2rem; cursor: pointer; margin-right: 1rem; border-radius: 4px 4px 0 0; position: relative; } .menu-item.activity { background: var(--acticity-color) ; } .menu-item.activity::before, .menu-item.activity::after { content: ""; display: block; height: var(--radius-size); width: var(--radius-size); position: absolute; bottom: 0; background: radial-gradient( var(--radius-size) at var(--radius-size) 0px, transparent var(--radius-size), var(--acticity-color) var(--radius-size) ); } .menu-item.activity::before { left: calc(-1 * var(--radius-size)); transform: scaleX(-1); } .menu-item.activity::after { right: calc(-1 * var(--radius-size)); }
重点是使用径向渐变【radial-gradient】,原理是将镜像渐变的中心点放置于角落上,再使用透明色作为渐变的中央,再将剩余渐变部分用主色填充。
// 竖向
$radius-size: 0.9rem; $acticity-color: #EAF3FF; .menu-item { width: 5.6rem; height: 4.8rem; //background: #EAF3FF; border-radius: 0.8rem 0 0 0.8rem; cursor: pointer; display: flex; justify-content: center; flex-direction: column; align-items: center; position: relative; } .menu-item.activity { background: $acticity-color ; } .menu-item.activity::before, .menu-item.activity::after { content: ""; display: block; height: $radius-size; width: $radius-size; position: absolute; right: 0; background: radial-gradient( $radius-size at $radius-size 0px, transparent $radius-size, $acticity-color $radius-size ); } .menu-item.activity::before { //right: calc(-1 * 10px); top: calc(-1 * 0.9rem); z-index: 10; transform: scaleX(-1); } .menu-item.activity::after { //right: calc(-1 * 10px); transform: scale(-1); z-index: 10; bottom: calc(-1 * 0.9rem); }