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

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

图1：菜单圆角敞口效果

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

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

<!-- 一个简单的侧边栏 -->
<aside>
  <a href="#">Hello world</a>
  <a href="#">Hello world</a>
  <a href="#">Hello world</a>
</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;
}

效果如下：

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

想到吗？

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

我们要做的，是在菜单右端的上下两侧各添加一个矩形（刚好可以用 :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;
}