How TO - CSS Arrows

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP




<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]
-->



How TO - CSS Arrows



❮ Previous
Next ❯


Learn how to create arrows/triangles with CSS.



Right arrow:


Left arrow:


Up arrow:


Down arrow:




How To Create Arrows


Step 1) Add HTML:


Example



<p>Right arrow: <i class="arrow right"></i></p>
<p>Left arrow: <i
class="arrow left"></i></p>
<p>Up arrow: <i class="arrow up"></i></p>

<p>Down arrow: <i class="arrow down"></i></p>



Step 2) Add CSS:


Example



i
    border: solid black;
   
border-width: 0 3px 3px 0;
    display: inline-block;
   
padding: 3px;


.right
   
transform: rotate(-45deg);
    -webkit-transform:
rotate(-45deg);


.left
   
transform: rotate(135deg);
    -webkit-transform:
rotate(135deg);



.up
    transform: rotate(-135deg);
   
-webkit-transform: rotate(-135deg);


.down
    transform: rotate(45deg);
   
-webkit-transform: rotate(45deg);

Try it Yourself »




❮ Previous
Next ❯

Popular posts from this blog

California

New York City

CNN