|
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;
} |
 |
|
|
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);
|
|
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;
} |
 |
|
