效果预览点击右侧“点击预览”按钮可在当前页面进行预览，点击链接可预览全文屏幕。https://codepen.io/comehop??e/pen/xjoOeM交互式视频教程本视频是交互式的，您可以随时暂停视频并编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/c/cQ74NAJ源码下载前端日常实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器中只有一个按钮：定义按钮样式：nav{--h:3em;}导航ul{填充：0;}navulli{列表样式类型：无；宽度：计算（var（--h）*1.732）；高度：var(--h)；背景色：#333；白颜色;字体系列：无衬线；文本对齐：居中；line-height:var(--h);}添加2个带有伪元素的倾斜矩形：navulli{position:relative;}navulli::before,navulli::after{content:'';位置：绝对；顶部：0；左：0；宽度：继承；身高：继承；背景颜色：#333；}navulli::before{变换：旋转（60度）translateX（calc（var（--h）*-2））；}navulli::after{变换：旋转（-60deg)translateX(calc(var(--h)*2));}增加鼠标悬停效果：navulli::before,navulli::after{z-index:-1;过滤器：不透明度（0）；过渡：0.3s;}navulli:hover::before{filter:opacity(1);transform:rotate(60deg)translateX(0);}navulli:hover::after{filter:opacity(1);transform:rotate(-60deg)translateX(0);}在dom中添加几个按钮组成一组按钮：为鼠标悬停效果在按钮之间留出空白：navulli{margin:2em;}再添加两个按钮：最后，尝试一些改变：nav{--h:3em;}nav:nth-child(1){--rate:1.5；--bgcolor:black;}nav:nth-child(2){--rate:1.732;--bgcolor:brown;}nav:nth-child(3){--rate:2;--bgcolor:green;}navulli{width:calc(var(--h)*var(--rate));background-color:var(--bgcolor);}navulli::before,navulli::after{background-color:var(--bgcolor);}大功告成！
