How to create the UP Arrow using only HTML and CSS?

Question

How to create the traiangle using only HTML and CSS?

I need to create the thick triangle using only CSS

I already tried this code:

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;

  border-bottom: 5px solid black;
}

<span class="arrow-up"></span>

You can see here Example of traiangle css https://css-tricks.com/snippets/css/css-triangle/ — Pravin Vavadiya, Aug 21 '17 at 10:59
Stackoverflow isn't a community for free code, you should have tried atleast something and if you couldn't pull it yourself or you are stuck somewhere with the code, then come here for help/solution.. — MirzaS, Aug 21 '17 at 10:59

score 4 · Accepted Answer · answered Aug 21 '17 at 11:01

4

You can try this for Up arrow. More click Here

  .arrow-up {
    width: 0; 
    height: 0; 
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;

    border-bottom: 15px solid blue;
  }

<div class="arrow-up"></div>

answered Aug 21 '17 at 11:01

Pravin Vavadiya

3,195
1
17
34

found this very helpful. http://html-tuts.com/css-arrows-up-down-left-right-triangle/ – smile Sep 17 '21 at 16:58

score 2 · Answer 2 · answered Aug 21 '17 at 11:01

2

You can create it using border. check snippet below..

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid black;
}

<div class="arrow-up"></div>

answered Aug 21 '17 at 11:01

Super User

9,448
3
31
47

ankita patel · Answer 3 · 2017-08-21T11:14:11.063

2

Use this code

.up-aerow {
    border-color: transparent transparent #000;
    border-style: solid;
    border-width: 10px;
    height: 0px;
    width: 0px;
}

<div class="up-aerow"></div>

edited Aug 21 '17 at 11:14

answered Aug 21 '17 at 11:04

ankita patel

4,201
1
13
28

How to create the UP Arrow using only HTML and CSS?

3 Answers3