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; } 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
Post a Comment