时间戳

首页 > 解决方案 > 将活动链接图标更改为半圆形

javascript - 将活动链接图标更改为半圆形

问题描述

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

HTML

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

SCSS

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%;
      }
    }
  }
}

JS

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

工作片段：

$('ul li').click(function() {
  $('.current').removeClass('current');
  $(this).addClass('current');
});
ul li {
  display: inline;
  background-color: #e5e5e5;
  padding: 20px 30px;
  position: relative;
}

ul li:hover {
  background-color: #c0c0c0;
  cursor: pointer;
}

ul li:hover:after {
  border-top: #c0c0c0;
}

ul li.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%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="current">Home</li>
  <li>About</li>
  <li>Location</li>
</ul>

标签： javascripthtmlcsssass

解决方案

我不知道它是否符合您的要求，如果我理解正确，但在活动类元素上有半圆形。您可以添加到 lioverflow: hidden;以确保 circle 没有超出容器。然后只需像这样将样式添加到 ::after 伪类

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

您只需创建 15px 半径的圆，其中一半是开箱即用的溢出：隐藏，仅此而已。你在你里的底部有一个半圆。

当然，必须添加您当前拥有的样式。

推荐阅读