edge gradient border for sub-menu

[SirenaColella]

Hello guys, I ask your help to understand how I can make a sub-menu like this with this edge gradient border. Also, I ask you some tips or tutorials on how to get even this gradient effect hover

http://imgur.com/HsQMlRU

thanks everybody!

[Paulie_D]

Looks like a clip path.

[SirenaColella]

Hi, please, help me with with edge gradient border for my sub-menu.

Here there is my codepen: http://codepen.io/Colella/pen/bprjEm

plaese help me… I’m fighting against this for weeks

[SirenaColella]

You can see my orrible sub-menu online here http://testbeta83.altervista.org/news/

Please, help me :(

[Paulie_D]

As I said, a clip path would probably be the way to go here but it’s very complex.

Here’s an example – http://codepen.io/imohkay/pen/MwaBBK/

[SirenaColella]

Yes, I understand what do you want tell me with a clip path. I’ll try! Thanks!
At least, I would like to understand how I can do that hover effect on list element (the line on the statement in the image)

https://imgur.com/HsQMlRU

[Paulie_D]

There’s a couple of ways to do that but the simplest is

li a:hover {
  text-decoration: line-through;
}

https://jsfiddle.net/c6y0hLp5/

If you want a gradient on the ‘line’ you’d have to use a positioned pseudo-element.

https://jsfiddle.net/d76nuuzj/

[SirenaColella]

OH! YOU ARE THE BEST! how I can change your kindness?
Thanks very very much! I don’t know that css snippet! Thanks!

[SirenaColella]

:( I’m sorry, I have some problem with my first clip path… I can’t have the white area inside my border
Here there is my codepen

http://codepen.io/Colella/pen/XderzG

Can someone help me? :( thanks a lot

[Author]

Posts