KW Online Tools Zone
Knowledge Walls
View All Tools Home
HOW TO DRAW ARROW AND TRIANGLES IN HTML AND CSS
[Javascript editor]
Run
Share Link
Clear
HTML [Ctrl+Enter] - to run
<table border="0" cellpadding="5" cellspacing="0"> <tr> <td><div class="arrow-all"><div></td> <td><div class="arrow-up"><div></td> <td><div class="arrow-down"><div></td> <td><div class="arrow-left"><div></td> <td><div class="arrow-right"><div></td> </tr> </table>
CSS [Ctrl+Enter] - to run
.arrow-all { width: 0; height: 0; border-style: solid; border-width: 40px; border-color: red blue green black; } .arrow-up { width: 0; height: 0; border-style: solid; border-width: 40px 40px 0px 40px; border-color: red transparent transparent transparent; } .arrow-down { width: 0; height: 0; border-style: solid; border-width: 0px 40px 40px 40px; border-color: transparent transparent green transparent; } .arrow-left { width: 0; height: 0; border-style: solid; border-width: 40px 40px 40px 0px; border-color: transparent blue transparent transparent; } .arrow-right { width: 0; height: 0; border-style: solid; border-width: 40px 0px 40px 40px; border-color: transparent transparent transparent black; }
Javascript [Ctrl+Enter] - to run
OUTPUT
Copyright © 2021 Knowledge walls, All rights reserved
Copyright © 2021 Knowledge walls, All rights reserved