How TO - CSS Arrows

Clash 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 ❯