Arrow CSS code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Arrow CSS</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="left"></div> <div class="right"></div> </body> </html>
2.style.css:
body { margin: 0; padding: 280px 0 0 500px; background: rebeccapurple; } .left, .right { width: 100px; height: 100px; transition: 0.5s; float: left; box-shadow: -2px 2px 0 rgba(255,255,255,0.5); cursor: pointer; } .left { transform: rotate(45deg); } .right { transform: rotate(225deg); } .left:hover, .right:hover { box-shadow: -2px 2px 0 rgba(255,255,255,1); }
