Arrow down css

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  border-top: 75px solid #f00;
}

Arrow left css

.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent; 
  border-right: 60px solid blue; 
}

Arrow up css

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  border-bottom: 75px solid #761E9B;
}

Arrow right css

.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  border-left: 60px solid green;
}

Similar codes

0 vote148 views1 answer
Affect top div opacity without affecting childrne
CSS
12 votes198 views1 answer
Pair impaire css
CSS
0 vote202 views1 answer
Trim background image css
CSS
1 vote203 views1 answer
Page icon css
CSS
0 vote220 views1 answer
If you're trying to use a package make sure that '../../static/fonts/lato/Lato-Regular.woff' is installed. If you're trying to use a local file make sure that the path is correct.
CSS
0 vote192 views1 answer
Css grid no stretch
CSS
0 vote207 views1 answer
Overflow-wrap: anywhere
CSS
1 vote187 views1 answer
Centering items in react css
CSS
1 vote213 views4 answers
Button style css
CSS
0 vote184 views1 answer
What is difference between padding and margin?
CSS