css - onHover Button cut out a triangle and show Background -


this question has answer here:

i want cut out triangle shape if button hover in picture:

enter image description here

i use site bootstrap here example navbar: http://www.bootply.com/ojeavrqoh6

i hope understand want do.

i know not answer wanted it's not clean think you'll have cut out arrow in image posted , set background image in :after pseudo element in code:

http://www.bootply.com/hgoudtm0vk

nav ul li a:hover:after { content:""; display: block; position: absolute;   top: 0;   left: 50%;   -wekit-transform: translatex(-50%);   -moz-transform: translatex(-50%);    -o-transform: translatex(-50%); transform: translatex(-50%);   background-image: url(http://wallpoper.com/images/00/31/33/51/black-background_00313351.jpg);   background-attachment: fixed;   height: 15px;   width: 40px;  } 

Comments

Popular posts from this blog

javascript - three.js lot of meshes optimization -

smartface.io - Proper way to change color scheme for whole application -

Email notification in google apps script -