时间:2021-07-01 10:21:17 帮助过:3人阅读
于是设计师有了下面的需求,下面加上小凹型:
凹型?凹型?凹型?有点变态,这怎么实现...........
图片肯定是最先考虑到的,CSS实现有貌似有一定难度.......
别怕,咋们遇难而上,go go...
先上html结构,这个很简单,没什么可以说明的:
css凹型导航
再看CSS
#nav { background: #fff; border-bottom: 1px solid #7bd1ff; width: 960px; margin: 100px auto; height: 60px;; } #nav ul li { float: left; list-style: none; height: 60px; margin: 0 10px; } li * { float: left; transition: all .2s; } .con { width: 60px; height: 60px; line-height: 60px; text-align: center; background: #7bd1ff; border-radius: 10px 10px 0 0; } /* 设置凹型的尺寸, 通过margin定位 */.left, .right { width: 7px; height: 7px; margin: 53px 0 0 0; } /* 下面的是关键,主要是用到了径向渐变 radial-gradient, 通过比例划分实现直接透明过度到背景色,没有渐变 测试结果显示 transparent 50% 并不能一半透明一半有颜色,70%+比较何时 */.left { background: -webkit-radial-gradient(top left, circle, transparent 70%, #7bd1ff 30%); } .right { background: -webkit-radial-gradient(top right, circle, transparent 70%, #7bd1ff 30%); } li:hover .con { background: #2d85ff } li:hover .left { background: -webkit-radial-gradient(top left, circle, transparent 70%, #2d85ff 30%); } li:hover .right { background: -webkit-radial-gradient(top right, circle, transparent 70%, #2d85ff 30%); }
so,这样,是不是也没有什么难度,轻松搞定。