Knowledge Walls
John Peter
Pune, Maharashtra, India
Create or Draw all angle arrows such as left, right, top and bottom using HTML and CSS
1676 Views
Hints 
Draw arrow using border. They are four borders are there in CSS. such as left, right, top and bottom. Border style, Border width, and Border color mainly used in CSS.

1. border-style: solid; (solid style of lines)
2. border-width: 50px; (arrow height and width)
    border-width: <top> <right> <bottom> <left>;
3. border-color: red; (For all left, right, top and bottom borders)
    border-color: <top> <right> <bottom> <left>; (for four side colors);
All borders 
Hints:
All borders has same size 40px and colors are different.

<div class="arrows"><div>

.arrows {
  width: 0;
  height: 0;

  border-style: solid;
  border-width: 40px;
  border-color: red blue green yellow;
}
Up arrow 
Hints.
Top border only given red colors. left and right borders are transporent. and bottom is not need for the down arrow.

<div class="arrows"><div>

.arrows {
  width: 0;
  height: 0;

  border-style: solid;
  border-width: 40px 40px 0px 40px;
  border-color: red transparent transparent transparent;
}
Down arrow 
Hints.
Top border is not needed. left and right border color should be transparent.

<div class="arrows"><div>

.arrows {
  width: 0;
  height: 0;

  border-style: solid;
  border-width: 0px 40px 40px 40px;
  border-color: transparent transparent red transparent;
}
Left arrow 
Hints
For left arrow, top and bottom should be transparent. and right side only can get left arrow.

<div class="arrows"><div>

.arrows {
  width: 0;
  height: 0;

  border-style: solid;
  border-width: 40px 40px 40px 0px;
  border-color: transparent red transparent transparent;
}
Right Arrow 
Hints
For right arrow, top and bottom should be transparent, and left border gives you right angle arrow.

<div class="arrows"><div>

.arrows {
  width: 0;
  height: 0;

  border-style: solid;
  border-width: 40px 0px 40px 40px;
  border-color: transparent transparent transparent red;
}
Demo 
Best Lessons of "One day One Thing to Know"
Top lessons which are viewed more times.
  Copyright © 2014 Knowledge walls, All rights reserved
KnowledgeWalls
keep your tutorials and learnings with KnowledgeWalls. Don't lose your learnings hereafter. Save and revise it whenever required.
Click here for more details