Css: Menu hover create custom shape background image?(parallelogram shape using css)

Question

Navigation MEnu

I have navigation html and want to add image on hover like this attachment,and it should set properly if menu text is long or short.if normal image is there it could be set but the shape is different so how can i set this?

is there any way to make such shape using any css?

He is talking about Hover.. Why should he use jQuery For that. CSS supports hover — AnaMaria, Aug 06 '13 at 09:18
Use the gray gradient as background for your list item and a transparent image with white corners as background for your link item. — slash197, Aug 06 '13 at 09:19
I suggest you read [this][1] so question to learn how to draw a pure css triangle. A parallelogram should be achievable too [1]: http://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work — Freeman Lambda, Aug 06 '13 at 09:49
@M1K1O jQuery [isn't the solution to everything](http://meta.stackexchange.com/a/19492/219504). It really [is not](http://i.stack.imgur.com/TdrW7.gif). — Niels Keurentjes, Aug 06 '13 at 09:51

score 6 · Accepted Answer · answered Aug 06 '13 at 10:01

6

Use pseudo elements :before and :after

FIDDLE

.testClass:hover:before {
    content: '';
    position: absolute;
    top:0;
    left:-15px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 0 30px 15px;
    border-color: transparent transparent beige transparent;

}
.testClass:hover:after {
    content: '';
    position: absolute;
    top:0;
    right:-15px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 30px 15px 0 0;
    border-color: beige transparent transparent transparent;

}

answered Aug 06 '13 at 10:01

Danield

121,619
37
226
255

1

Better solution than mine. I Admit – AnaMaria Aug 06 '13 at 10:11
just tried it. http://jsfiddle.net/rQgtJ/ it works fine but there is one issue. just hover the menu item. gradient will appear in the middle only not on edges of parallelogram. – Jack Torris Aug 06 '13 at 10:30
1

hmmm, I haven't tried adding gradients to borders before, I just found this post http://stackoverflow.com/a/6441510/703717, but I'm not sure yet if this will work. Also note that only one of the borders has a color on each of the pseudo elements – Danield Aug 06 '13 at 10:40

user2477139 · Answer 2 · 2013-08-06T09:31:29.610

0

use css like

#parallelogram { width: 150px; height: 100px; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); background: red; }

check link http://jsfiddle.net/2G3zf/

edited Aug 06 '13 at 09:31

answered Aug 06 '13 at 09:25

user2477139

608
1
6
21

it is not working in IE8.. is it possible to get hover effect like attached image? – Jack Torris Aug 06 '13 at 09:34

AnaMaria · Answer 3 · 2013-08-06T09:50:53.583

Elaborating on the comment that slash197 gave here is a working fiddle i created earlier for a link button.

FIDDLE

This demonstrates the Hover as well as gradient property in CSS ... This is being applied to a DIV

HTML

<div >
<div class="testClass">HOME</div>
<div class="testClass">ABOUT US</div>
<div class="testClass">CONTACT</div>
<div class="testClass">LOGIN</div>
<div class="testClass">SERVICES</div>

CSS

div {
    float:left;   
    background-color:#fff;    

}
.testClass {
    margin-top: 0px;
    margin-left: 0px;
    width: 100px;
    height: 63px;
    zoom: 1;
    display: block;
    background-repeat: no-repeat;
    background: #fff;

}
.testClass:hover {
    background: #eaebea;
    -webkit-transform: skew(-20deg);
    /* Old browsers */
    background: -moz-linear-gradient(top, #eaebea 0%, #d6d7d5 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eaebea), color-stop(100%, #d6d7d5));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #eaebea 0%, #d6d7d5 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #eaebea 0%, #d6d7d5 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #eaebea 0%, #d6d7d5 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #eaebea 0%, #d6d7d5 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eaebea', endColorstr='#d6d7d5', GradientType=0);
    /* IE6-9 */
}

EDIT: Updated fiddle

Will work on IE9-10

Css: Menu hover create custom shape background image?(parallelogram shape using css)

3 Answers3