javascript - how to create arrow down/up in css -


how can create arrow point down /up in css?

i tried build 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 result:enter image description here.

but tried build this:enter image description here

any suggestions?

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>


Comments

Popular posts from this blog

how to insert data php javascript mysql with multiple array session 2 -

multithreading - Exception in Application constructor -

windows - CertCreateCertificateContext returns CRYPT_E_ASN1_BADTAG / 8009310b -