I just came across CSS Arrow please which helps me creating CSS triangles. However, that’s not enough. It only creates an outer arrow, while I would like to create inner triangles as well.
This above was just created within Photoshop. I’m able to create the first able using CSS Arrow Please, but then the hard(er) part comes along. How do I create a block that contains both an outer (right aligned) and inner (left-aligned) arrow, where the last one only contains an inner (left-aligned) arrow.
The result of this should be a
clickable proces chain.
To create the first one, this is the CSS
.arrow_box:first-child {
position: relative;
background: #1abc9c;
border: 5px solid #16a085;
}
.arrow_box:first-child:after, .arrow_box:first-child:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:first-child:after {
border-color: rgba(26, 188, 156, 0);
border-left-color: #1abc9c;
border-width: 16px;
margin-top: -16px;
}
.arrow_box:first-child:before {
border-color: rgba(22, 160, 133, 0);
border-left-color: #16a085;
border-width: 23px;
margin-top: -23px;
}
But then my question rises: How would I create the other two?
Thanks!
3
Answers
Not a “Pure CSS” solution but perhaps much less complicated with images:
You can see it in action in this fiddle
You need 4 pseudo elements to create this properly, because triangles are created using
border
s, so they can’t have aborder
and differentbackground-color
. We therefore need an inner and outer triangle for both sides. We can use both::before
and::after
, but since that only gives us two, we need at least two “real” elements.Since this is a navigation panel, I used a series of
li
s and placed ana
inside each one. This is a complicated setup though, so I’m going to break it down into several Fiddles showing the progression.Edit: I’ve updated this so that the navigation elements are fluid, not fixed-width, per OP’s comments.
Step 1 – Navigation Setup:
First we set up the navigation boxes according to your mockup.
HTML:
CSS:
Step 2 – Set Up Pseudo-elements:
We are going to be using
:before
and:after
, based on the code you provided in your question. Note, I’ve compressed this CSS based on rules that are shared across elements. Both inner triangles have the same color, both left arrows have the same position, etc.CSS:
We’ve got an issue with the wrong triangles overriding others though. We can fix this with some judicial
z-index
;Step 3 – Fix Display Order:
Now we have working arrows that look right, on all elements. Success! ….almost. We have the arrows appearing on all elements, and we need to hide certain arrows for the beginning and end of the navigation panel.
Step 4 – Fix First and Last Navigation Children:
In this final step we want to remove the two arrows before the first header element, and the two arrows after the last child. The code is surprisingly simple with the structure we’ve set up so far. We need two selectors, and a
display:none;
.And we’re done!
Edit: Props to disinfo for idea of using
nav
instead ofheader
.Summary
As requested by OP in comments, final code is:
HTML:
CSS:
Here’s a pure CSS way:
HTML
CSS
Here’s the fiddle:
http://jsfiddle.net/disinfor/8KvRp/3