Question

184

how to create arrow down/up in css

rated 0 times [ 187] [ 3] / answers: 1 / hits: 26206 / 9 Years ago, wed, january 6, 2016, 12:00:00

How can I create a arrow point down /up in css?

I tried to build it from div:

.triangle_down {

    width: 0;

    height: 0;

    border-left: 15px solid transparent;

    border-right: 15px solid transparent;

    border-top: 15px solid #2f2f2f;

    font-size: 0;

    line-height: 0;

    float: left;

}

This is the result:.

But i tried to build something like this:

Any suggestions?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

briannar

Add To Favorites

Follow

Total Points: 354

Total Questions: 103

Total Answers: 101

Location: Japan

Member since Sat, Jun 6, 2020

4 Years ago

answered 9 Years ago amari · Accepted Answer

My proposal is:

.triangle_down {

  width: 0;

  height: 0;

  border-left: 15px solid transparent;

  border-right: 15px solid transparent;

  border-top: 15px solid #2f2f2f;

  font-size: 0;

  line-height: 0;

  float: left;

}

.triangle_down1 {

  position: relative;

  top: -5px;

  content: ;

  display: inline-block;

  width: 15px;

  height: 15px;

  border-right: 0.2em solid black;

  border-top: 0.2em solid black;

  transform: rotate(135deg);

  margin-right: 0.5em;

  margin-left: 1.0em;

}

 .triangle_up1 {

   position: relative;

   top: -5px;

   content: ;

   display: inline-block;

   width: 15px;

   height: 15px;

   border-right: 0.2em solid black;

   border-top: 0.2em solid black;

   transform: rotate(-45deg);

   margin-right: 0.5em;

   margin-left: 1.0em;

 }

<div id=dialog1 class=triangle_down></div>

<div id=dialog2 class=triangle_down1></div>

<div id=dialog3 class=triangle_up1></div>