0

I want to cut out a triangle shape if a Button is hover like in this picture:

enter image description here

I use for my site bootstrap so here is a example for my navbar: http://www.bootply.com/oJeavrQoH6

I hope you all understand what I want to do.

Darek Kay
  • 15,827
  • 7
  • 64
  • 61
Andi
  • 93
  • 1
  • 2
  • 6
  • Hello Andi, welcome to Stackoverflow! Please have a look at [this page](http://stackoverflow.com/help/how-to-ask) to see how you could improve your question, for example, by showing us what you've tried already, and by adding some code snippets. – Jordumus May 15 '15 at 13:01
  • i cant show u what i tried because i have no idea how i can handle it, sry – Andi May 15 '15 at 13:12

2 Answers2

0

I know this is not the answer you wanted as it's not perfectly clean but I think you'll have to cut out the arrow in the image you posted and set it as a background image in the :after pseudo element in this 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;

}
Jonas Grumann
  • 10,438
  • 2
  • 22
  • 40
0

Use multiple linear gradients (IE10+).
For example http://www.bootply.com/zwpEtQD5dY

Philip Dernovoy
  • 1,169
  • 6
  • 17