- This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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 `::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;
}
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