×

Welcome to TagMyCode

Please login or create account to add a snippet.
 

triangle arrow

0
0
 
0
Language: CSS
Posted by: Marosi Dóra
Added: Aug 30, 2017 12:29 PM
Modified: Aug 30, 2017 12:52 PM
Views: 2499
Tags: no tags
  1. .arrow-up {
  2.   width: 0;
  3.   height: 0;
  4.   border-left: 5px solid transparent;
  5.   border-right: 5px solid transparent;  
  6.   border-bottom: 5px solid black;
  7.  
  8.   /* before:
  9.     position: absolute;
  10.     left: 49%;
  11.     top: -28px;
  12.     content: "";
  13.   */
  14. }
  15.  
  16. .arrow-down {
  17.   width: 0;
  18.   height: 0;
  19.   border-left: 20px solid transparent;
  20.   border-right: 20px solid transparent;
  21.  
  22.   border-top: 20px solid #f00;
  23. }
  24.  
  25. .arrow-right {
  26.   width: 0;
  27.   height: 0;
  28.   border-top: 60px solid transparent;
  29.   border-bottom: 60px solid transparent;
  30.  
  31.   border-left: 60px solid green;
  32. }
  33.  
  34. .arrow-left {
  35.   width: 0;
  36.   height: 0;
  37.   border-top: 10px solid transparent;
  38.   border-bottom: 10px solid transparent;
  39.  
  40.   border-right:10px solid blue;
  41. }

Write a comment

To post comments, please log in or register.