Search code examples
htmlcsscss-shapes

CSS - Triangle down

How do I create an arrow down (triangle) when hovering over a link?

something like the result tab on CodePen, see here

I was trying to create the triangle by following the the tutorial above, but no luck

 a{
  background: red;
    float: left;
    width: 30%;
    padding: 5px;
    display block
  }

  a:hover {background: green;}
Solution

  • I'm not sure what you mean, but this could be the answer:

    css:

    .arrow_down_on_hover{
  position: relative;
}
.arrow_down_on_hover:before{
  content: "";
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  display: none;
  border-top: 20px solid #f00;
  position: absolute;
  right: 50%;
  margin-right: -10px;
  bottom: -20px;
}
.arrow_down_on_hover:hover:before{
  display: block;
}

    html:

    <a class="arrow_down_on_hover" href="#!">hover me</a>

    example:

    http://codepen.io/eboye/pen/zBYzav