<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .arrow{ border: 30px solid transparent; border-top:30px solid #396bb3; display: inline-block; } .arrow:hover{ border: 30px solid transparent; border-bottom:30px solid #000000; margin-top: -15px; } </style> </head> <body> <div class="arrow"> </div> </body> </html>