0

I have a local install of wordpress and working with a theme. When on a page, the 'current page' has a dynamic colored line with triangle shape. The ultimate goal is to take the triangle and duplicate it across the whole menu item, for a jagged effect, instead of the single centered one.. I found some material on 'Dynamic Menu Highlighting' but can't figure out how to apply it. It's not an image or background image, it seems to be purely css. Below is the css sample from styles.css. When I play around with transform: I can get some results, just not the results desired. Hope someone can help. Thanks! 

.not-ie #main-nav .current_page_item:after,
.not-ie #main-nav .current_page_parent:after,
.not-ie #main-nav .current-menu-item:after {
    background: #f15a23;
    bottom: -2.5px;
    content: '';
    left: 50%;
    display: block;
    height: 5px;
    margin: 0 0 0 -2.5px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    width: 5px;
}
4

1 回答 1

0

there's an nice explanation of css triangles here: How do CSS triangles work?

but you can't use this technique to create multiple triangles using only one html element.

you could introduce more elements so that you can display more triangles, but this doesn't sound like a great solution to me. so in this case it might be simplest to use an image. the advantage of using an image is also that you can repeat it horizontally if you have elements of varying width.

EDIT:

I've found another css-only solution (heavily influenced by lea verou's 3rd element here: http://leaverou.github.com/animatable/) - however it doesn't work in IE, so it mightn't be a solution for you, but incase you're interested, here it is:

#zig_zag {
    width: 140px;
    height: 5px;
    border-top:1px solid #E91010;
    background-repeat: repeat-x;
    background-position:10px 0;
    background-size: 7px 10px;
    background-image:
        linear-gradient(-45deg, #E91010 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #E91010 75%),
        linear-gradient(45deg, #E91010 25%, transparent 25%),
        linear-gradient(-45deg, transparent 75%, #E91010 75%);      
}

jsfiddle here: http://jsfiddle.net/hGy6X/

[note: it uses lea verou's prefix free script http://leaverou.github.com/prefixfree/ ]

于 2012-10-08T08:42:32.863 回答