Javascript 将活动链接图标更改为半圆

我有一个链接列表

li

，我想在活动链接下方添加一个半圆图标。如何添加此图标或至少将箭头更改为半圆

HTML

<ul>
  <li class="current">Home</li>
  <li>About</li>
  <li>Location</li>
</ul>

JS

ul {
  li {
    display:inline;
    background-color:#e5e5e5;
    padding:20px 30px;
    position:relative;
    &:hover {
      background-color:#c0c0c0;
      cursor:pointer;
      &:after {
        border-top:#c0c0c0;
      }
    }
    &.current {
      &:after {
      width: 0;
      height: 10px;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 15px solid #FFFFFF;
      content:" ";
      border-radius: 100% 100% 100% 100%;
      position: absolute;
      bottom: -20px;
      left: 35%;
      }
    }
  }
}

$('ul li').click(function() {
  $('.current').removeClass('current');
  $(this).addClass('current');
});

工作代码段：

$（'ulli'）。单击（函数（）{
$（'.current'）.removeClass（'current'）；
$（this.addClass（'current'）；
});
ulli{
显示：内联；
背景色：#E5；
填充：20px 30px；
位置：相对位置；
}
ulli：悬停{
背景色：#C0；
光标：指针；
}
ul li：悬停：在{
边框顶部：#C0C0；
}
ul li.当前：之后{
宽度：0；
高度：10px；
左边框：15px实心透明；
右边框：15px实心透明；
边框顶部：15px实心#FFFFFF；
内容：“；
边界半径：100%100%100%100%；
位置：绝对位置；
底部：-20px；
左：35%；
}


主页
关于
位置
我不知道它是否符合我们的要求，也不知道我是否理解正确，但在活动类元素上有半圆。您只需添加到li
overflow:hidden确保圆圈未超出容器。然后只需像这样在伪类之后向：：添加样式

width: 30px;
height: 30px;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);

你只需创建一个半径为15px的圆，他的一半是开箱即用的，有溢出：隐藏，就是这样。在你的李的底部有一个半圆

当然，这个样式必须添加到您当前拥有的样式中。
您已经做得很好了。我所做的只是将您的sass更改为常规CSS，这样它就可以在代码段中工作，然后稍微弄乱定位

编辑：添加了一个更好的半圆


$（'ulli'）。单击（函数（）{
$（'.current'）.removeClass（'current'）；
$（this.addClass（'current'）；
});
正文{
背景颜色：黄色；
}
ulli{
显示：内联；
背景色：#E5；
填充：20px 30px；
位置：相对位置；
}
ulli：悬停{
背景色：#C0；
光标：指针；
}
ul li：悬停：：之后{
边框顶部：#C0C0；
}
当前：：之后{
背景色：#fff；
内容：“；
位置：绝对位置；
底部：0px；
左：计算（50%-15px）；
高度：15px；
宽度：30px；
边框左上半径：30px；
边框右上角半径：30px；
}


主页
关于
位置
我已经修改了您的CSS并添加了注释，以便您可以查看涉及哪些属性

您可以根据自己的喜好进行调整


$（'ulli'）。单击（函数（）{
$（'.current'）.removeClass（'current'）；
$（this.addClass（'current'）；
});
li{
显示：内联；
背景色：#E5；
字体系列：calibri、helvetica、arial；
填充：20px 30px；
位置：相对位置；
}
李：悬停{
背景色：#C0；
光标：指针；
}
当前：之后{
内容：“；
/*定位*/
位置：绝对位置；
底部：-8px；
左：50%；
转化：translateX（-50%）；
/*半圆*/
背景：#0f9def；
边界半径：0 0 15px 15px；/*宽度的一半*/
高度：15px；/*宽度的一半*/
宽度：30px；
}


主页
关于
位置
如果必须这样做，我会这样做：

&.current {
  &:after {
    font-size: 32px;
    content: " \25D6";
    position: absolute;
    bottom: -20px;
    left: 35px;
    color: white;
    transform: rotate(90deg);
  }
}