create a diamond shape on hover of menu item

Question

I have a menu item and when hovering over it, it drops down an orange box.

.menu > li > a:hover:after {
    position: absolute;
    left: 0px;
    border-style: solid;
    border-color: transparent;
}

However I am trying to achieve the effect of a diamond below the dropdown box.

I seen a post on here that linked this [website][4] and I attempted to use the diamond:after method, however the result was way off. I have commented the css part that needs to be edited, for quick reference. If anyone could help.

Does this help - http://stackoverflow.com/questions/25873566/half-hexagon-shape-with-one-element/25873637#25873637 ? — Harry, Mar 01 '15 at 14:14
Altho that gets the shape, my question still stands as I cant seem to incorporate it with my hover and focus. As I said in my question and also linked to the website that explains the method mentioned by harry it comes out horribly wrong. — G Gr, Mar 01 '15 at 14:21
possible duplicate of [How does this CSS triangle shape work?](http://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work) — Paulie_D, Mar 01 '15 at 14:31
@JungleBoogie You should use transforms instead of border hack. — The Pragmatick, Mar 01 '15 at 14:34

score 3 · Accepted Answer · answered Mar 01 '15 at 14:28

1) In your CSS there is no declaration for the :after psuedo-element (.menu > li > a:hover:after {/* your css */}). For example:

.menu > li > a:hover:after {
    content: ""; /* empty content */
    position: absolute;
    bottom: -50px; /* position 50px below the bottom of the menu link */
    left: 0px;
    border-style: solid;
    border-color: transparent;
    border-width: 0px 60px; /* diamond has 60px to the left and to the right of the midpoint, so the menu item should be 120px width */
    border-top: 50px solid #FF6E0D;
}

This method requires you to specifiy the width of the menu items, since you want to have the diamond spanned across the entire bottom of the link. (Using the left/right border-width's.)

2) To use this method, you should add position: relative; to the .menu > li > a declaration, since the :after psuedo-element needs this to position itself.

that solved it, I never had position relative or the menu items width set! — G Gr, Mar 01 '15 at 14:39
I forget it all the time, so it's the first thing I check :) — Philip, Mar 01 '15 at 14:43
Btw, jbutler483's answer has a better way of using it in a animation (transform), since my example is static. — Philip, Mar 01 '15 at 14:44

score 3 · Answer 2 · answered Mar 01 '15 at 14:33

You could use a pseudo element for this, and 'move' it on the hover:

div {
  height: 50px;
  width: 100px;
  background: orange;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
div:before {
  content: "";
  position: absolute;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 50px solid orange;
  top: 0;
  left: 0;
  transition: all 0.6s;
  z-index:-1;
}
div:hover:before {
  top: 100%;
}

<div>Option</div>

Jeff · Answer 3 · 2015-03-06T14:30:09.150

I used the :after pseudo element to add the arrow. It didn't look great with the transitions though since both are animated separately. You'll have to dig in a little bit there if you want to get it smooth. But this at least gets the arrow appearing in the correct place, which really seemed like the important part of your question. Then you just use the hover pseudo element to set display to block.

.menu > li > a:after {
  content: "";
  position: absolute;
  display: none;
  top: 160px;
  left: 0px;
  width: 0;
  height: 0;
  border-left: 62px solid transparent;
  border-right: 62px solid transparent;
  border-top: 60px solid #FF6E0D;
}

.menu > li > a:hover:after {
  display: block;
}

thanks for your reply Jeff, I managed to solve it with the above answer. — G Gr, Mar 01 '15 at 14:40

create a diamond shape on hover of menu item

3 Answers3