Треугольник под пунктом меню CSS

Question

Мой клиент предоставил мне дизайн для своего сайта и включает в себя стандартное меню с треугольником вниз активного элемента (см. Изображение). Я не знаю, с чего начать ... Каков наилучший способ получить этот эффект?

Answer 1

Вот учебник по генерации стрелки, треугольники и другие формы с помощью CSS: http://www.howtocreate.co.uk/tutorials/css/slopes

Также посмотрите на то, как CSS Arrow пожалуйста! создает свои стрелы: http://cssarrowplease.com/

Вот небольшой пример, который я только что залетела:

HTML:

<div class="active"> 
    <div>Active Menu Item</div> 
</div> 

CSS:

.active > div { 
    width: 150px; 
    padding: 10px; 
    background-color: #f00; 
    color: #fff; 
    text-align: center; 
} 
.active::after { 
    display:block; 
    content: ""; 
    font-size: 0px; line-height: 0%; width: 0px; 
    border-top: 20px solid #f00; 
    border-left: 85px solid #fff; 
    border-right: 85px solid #fff; 
} 

JS Fiddle: http://jsfiddle.net/dmf3s97m/