Добавление нижней стрелки/треугольник к наведен активного элемента

Question

У меня есть <ul>, который отображается inline-block и мне нужно, чтобы иметь стрелка появляется, когда элемент активен, см скриншот:

И здесь является то, что я в настоящее время:

Я уже функциональность с активацией элемента при наведении курсора мыши:

.coffee

$(".solutions-items li").hover -> 
    $(this).addClass("solutions-items-active").siblings().removeClass "solutions-items-active" 

Мои .html

<div class="text-center"> 
    <ul class="solutions-items"> 
     <li class="solutions-items-active"><img class="home-solutions-icon" src="" alt="online shop"></li> 
     <li><img class="home-solutions-icon" src="" alt="mobile smartphone"></li> 
     <li><img class="home-solutions-icon" src="" alt="couch commerce tablet"></li> 
     <li><img class="home-solutions-icon" src="" alt="pos point of sale"></li> 
     <li><img class="home-solutions-icon" src="" alt="marketplace"></li> 
     <li><img class="home-solutions-icon" src="" alt="wearables"></li> 
     <li><img class="home-solutions-icon" src="" alt="e-commerce innovations"></li> 
    </ul> 
    </div> 

А вот мой CSS:

.scss

.solutions-items li { 
    display: inline-block; 
} 

.home-solutions-icon { 
    height: 7em; 
    padding: 0.5em; 
} 

.solutions-items-active { 
    background: $green; 
} 

Любые идеи, как я могу справиться с этим? Благодаря !

Answer 1

Возможно, вы просто хотите добавить немного CSS для этого. Если изображение имеет фиксированный размер, есть CSS трюк, чтобы сделать это:

.arrow-down { 
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent; 

    border-top: 20px solid #f00; 
}