For the past week or so, we've been trying to make this possible using pure CSS, and we're now to the point where we have no clue what to do.
I know you could do this with an image, but I really don't want to... I've looked for examples for reference, but have had no such luck. Most of the examples I have found have the the notch at the bottom and use a border.
You can use the pseudo selector ::after to semantically create new elements. Because it's technically separated from the original element it doesn't inherit the parents size. This should give you what you're looking for. http://codepen.io/BaylorRae/pen/iwynH
Here's the bit of code used to make it work.
li {
border: 1.25em solid #ddd;
position: relative;
}
li:after {
content: '';
/* position the arrow */
position: absolute;
right: -1.25em;
top: 50%;
margin-top: -10px;
/* create the arrow */
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
/* change the arrow color */
border-right:10px solid #fff;
}
A client has asked my friend and I to create their left navigation similar to PowerPoint's navigation (http://support.microsoft.com/Library/Images/2777435.png).
For the past week or so, we've been trying to make this possible using pure CSS, and we're now to the point where we have no clue what to do.
I know you could do this with an image, but I really don't want to... I've looked for examples for reference, but have had no such luck. Most of the examples I have found have the the notch at the bottom and use a border.
http://codepen.io/ksneaux/pen/rfvwo
It looks dreadful, I know, but we're not sure anymore. If anyone can spare some thoughts or ideas, please let me know.
I'm not entirely clear on which part of PowerPoint you're trying to replicate? The left menu? The top?
You can use the pseudo selector
::afterto semantically create new elements. Because it's technically separated from the original element it doesn't inherit the parents size. This should give you what you're looking for. http://codepen.io/BaylorRae/pen/iwynHHere's the bit of code used to make it work.
Best I can do: http://codepen.io/anon/pen/dejIq
@rosspenman It's the left menu.
and Thanks @Paulie_D!
Here's my attempt. http://codepen.io/rosspenman/pen/zhsIu