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

Posted 2023-03-06

【中文标题】将活动链接图标更改为半圆形

【英文标题】：Change active link icon to a semi circle

【发布时间】：2020-06-15 07:26:18

【问题描述】：

我有一个链接列表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');
);

工作 sn-p ：

$('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>

【参考方案1】：

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

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

您只需创建 15px 半径的圆，其中一半是开箱即用的，它有溢出：隐藏，就是这样。你的 li 底部有一个半圆。

当然，这种样式必须添加到您当前拥有的样式中。

【参考方案2】：

你已经做得很好了。我所做的只是将您的 sass 更改为常规 CSS，这样它就可以在 sn-p 中工作，然后稍微弄乱定位。

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

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

body 
    background-color: yellow;

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 
    background-color: #fff;
    content: " ";
    position: absolute;
    bottom: 0px;
    left: calc(50% - 15px);
    height: 15px;
    width: 30px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;

<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>

【参考方案3】：

如果我必须这样做，我会这样做：

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

【参考方案4】：

我已经修改了您的 CSS 并添加了 cmets，以便您查看涉及哪些属性。

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

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

li 
  display: inline;
  background-color: #e5e5e5;
  font-family: calibri, helvetica, arial;
  padding: 20px 30px;
  position: relative;


li:hover 
  background-color: #c0c0c0;
  cursor: pointer;


li.current:after 
  content: " ";
  
  /* positioning */
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  
  /* half circle */
  background: #0f9def;
  border-radius: 0 0 15px 15px; /* half of the width */
  height: 15px; /* half of the width */
  width: 30px;

<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>