Currently I have a div that looks like this:
I need to edit the HTML/CSS so that it displays like this with a small triangle underneath. Ideally, I would like to do this using purely HTML and CSS, no image files. According to CSS-Tricks it can be done.
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;
}
If anyone can help me do this I'd really appreciate it!
Generate your own div with an arrow at http://cssarrowplease.com/
You can configure it like you want and become a clean CSS
How it works:
Lets' create a very simple triangle with this technique:
.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>
The important thing is height: 0;
& width: 0
of the pseudo-element where we apply the border. So you can imagine an element of no size. And this is the origin of the border. So each side of the border is a triangle (try colorize each side in a different color to understand it).
So to create the "single triangle" effect, just apply a transparent color to the border and colorize the triangle you want to display.
Alternative: CSS Clip-Path
You can create a rectangle now very easy with the new clip-path
with CSS. Just watch out for the browser-support. As usual, IE & sadly Edge both won't support it as well as Opera Mini: Can I Use
Quick Example:
.new_way { position: relative; margin: 100px auto; background: #88b7d5; width: 100px; padding: 20px; text-align: center; } .new_way::after { content: ''; position: absolute; top: 100%; left: calc(50% - 10px); background: #88b7d5; width: 20px; height: 20px; /* The points are: (left top: xy, right top: xy, center bottom: xy) */ clip-path: polygon(0 0, 100% 0, 50% 100%); }
<div class="new_way"> Clip Path </div>
So now you only need 1 line. Nice, isn't it?
This is called "callout".
Here are some examples:
http://cssdeck.com/labs/bv45bh6p (some examples)
http://mrcoles.com/blog/callout-box-css-border-triangles-cross-browser/ (with explanation of how it works)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.