去掉圆角_前端学习(7): 怎么实现菜单背景的圆角敞口效果

准备深入学习一下前端并计划每周至少写一篇关于前端的文章。本文是第七篇。

---

所谓圆角敞口效果，如下图：

图1：菜单圆角敞口效果

当鼠标经过某一菜单时，其背景置白，右侧有"张嘴"的效果。注意右侧的圆角。

为了模拟方便，我们给一个简化后的 HTML 结构：

<aside>
  <a href="#">Hello worlda>
  <a href="#">Hello worlda>
  <a href="#">Hello worlda>
aside>

首先，但非必需，给 aside 元素设置一些基础样式(蓝色的渐变背景、宽高、内边距等)：

aside {
  width: 16rem;
  height: 100vh;
  background: linear-gradient(30deg, #0048bd, #44a7fd);
  padding: 2rem 0 0 2rem;
  border-top-right-radius: 4rem;
}

在鼠标经过时菜单的背景是横向铺满的，所以我们设置其 display:block ：

aside > a {
  /*菜单横向铺满*/
  display: block;
  color: #fff;
  padding: 1rem;
  text-decoration: none;
}

aside > a:hover {
  /*鼠标经过菜单时，改变菜单背景色*/
  background: #fff;
  color: #3f5efb;
}

此时，我们得到的效果如下：

图2：鼠标经过时

因图1中菜单左侧背景是圆角的，我们也照做：

aside > a {
  /*接着上面*/
  border-top-left-radius: 2rem;
  border-bottom-left-radius: 2rem;
}

效果如下：

图3：左侧圆角

最后，也是最复杂的部分，右侧的圆角敞口效果。读者可先想想自己怎么实现。

图4：右侧圆角

想到吗？

看到下面这张图你也许就有灵感了：

图5：怎么实现右侧圆角

我们要做的，是在菜单右端的上下两侧各添加一个矩形(刚好可以用 :after 和 :before 实现)，然后上方的矩形其右下角设置圆角，下方的矩形其右上角设置圆角。但圆角外的背景色仍然是蓝色的(见上图)，所以还要做的，是把矩形圆角外的那部分蓝色区域变成白色。

怎么改变圆角外的颜色？

box-shadow 来帮忙，圆角外的部分，将其阴影设置为白色(和菜单背景色一致)：

aside > a {
  /*为了将 :after/:before 定位到菜单的最右端*/
  position: relative;
}

aside > a:hover:after {
  content: "";
  display: block;
  position: absolute;
  
  /*菜单右上角的矩形*/
  right: 0;
  bottom: 100%;
  
  /*矩形右下角设置圆角*/
  border-bottom-right-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid green;
  
  /*矩形右角设置白色背景*/
  box-shadow: 0 1rem #fff;
}

得到结果如下：

上面是右上角的矩形效果，只要再用 :before 补充完菜单右下角的矩形，整个结果就呼之欲出了：

最后，只要把矩形的边框去掉：

一个新鲜的圆角敞口效果就出来了。

总结一下吧

为了实现上述"张嘴"效果：我们用到了：

1. 渐变背景色(非必须)：background: linear-gradient(30deg, #0048bd, #44a7fd)。
2. 只给矩形的某一个角设置圆角：border-top-right-radius: 4rem。
3. :before 和 :after 结合 position 的使用。
4. 使用 box-shadow 移除盒子圆角外的背景色。

谢谢阅读。点击「阅读原文」可查看 CodePen 完整示例。

- END -