| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| .arrow { |
| width: 0; |
| height: 0; |
| margin: 10px; |
| } |
| .left, .right{ |
| border-top: 19px solid transparent; |
| border-bottom: 19px solid transparent; |
| } |
| .up, .down{ |
| border-left: 19px solid transparent; |
| border-right: 19px solid transparent; |
| } |
| .right { border-left: 61px solid purple; } |
| .left { border-right: 61px solid purple; } |
| .up { border-bottom: 61px solid purple; } |
| .down { border-top: 61px solid purple; } |
| </style> |
| </head> |
| <body> |
| <div class="arrow right"></div> |
| <div class="arrow left"></div> |
| <div class="arrow up"></div> |
| <div class="arrow down"></div> |
| </body> |
| </html> |
