Чистый HTML/CSS для создания указателя треугольника под кнопкой

В настоящее время у меня есть div, который выглядит так:

enter image description here

Мне нужно отредактировать HTML/CSS, чтобы он отображался следующим образом с маленьким треугольником внизу. В идеале я хотел бы сделать это, используя только HTML и CSS, без файлов изображений. Согласно CSS-Tricks это можно сделать.

enter image description here

HTML:

<ul id="nav">
    <li class="active"><a href="#"><div class="triangle"></div>Dashboard</a></li>
    <li><a href="users/index.html"><div class="triangle"></div>Manage Users</a></li>
    <li><a href="tickets/index.html"><div class="triangle"></div>Manage Tickets</a></li>
    <li><a href="reports/index.html"><div class="triangle"></div>Reports</a></li>
</ul>

CSS:

#nav {
    float: right;
    margin: 0;
    padding: 8px 0 0 0;
    list-style: none;
    display: inline-block;
}

#nav li {
    float: left;
    padding: 7px 5px;
    margin: 0 5px;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300;
    border-radius: 7px;
}

#nav li a {
    color: #0b70cc;
    text-decoration: none;
    padding: 7px 5px;
}

#nav li.active a {
    color: #ffffff;
}

#nav li.active {
    background-color: #0b70cc;
    color: white;
}

JSFiddle

Если кто-нибудь может мне помочь, я бы очень признателен!

Ответы

Ответ 1

Создайте свой собственный div со стрелкой по адресу http://cssarrowplease.com/

Вы можете настроить его так, как хотите, и стать чистым CSS

Как это работает:
Позволяет создать очень простой треугольник с помощью этой техники:

.container {
  position: relative;
  display: block;
  width: 120px;
  height: 50px;
  background: blue;
}

.container:after{
  position: absolute;
  bottom: 0;
  height: 0;
  width: 0;
  left: 50%;
  border: 40px solid transparent;
  border-bottom-color: red;
  content: "";
}
<div class="container"></div>