В настоящее время у меня есть div, который выглядит так:
Мне нужно отредактировать HTML/CSS, чтобы он отображался следующим образом с маленьким треугольником внизу. В идеале я хотел бы сделать это, используя только HTML и CSS, без файлов изображений. Согласно CSS-Tricks это можно сделать.
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;
}
Если кто-нибудь может мне помочь, я бы очень признателен!