html - img - Cuidado boca abajo

title html

Question

HTML

 <span class="caret"></span> 

Me da una flecha de cursor, pero quiero tener un símbolo de intercalación que se parece a ▲ .

¿Hay alguna clase disponible para esto en Bootstrap? Si no, ¿cómo lograr esto?

Answer 1

Acabo de tener este problema y la mejor solución para mí fue editar el estilo original de arranque para obtener el que necesitaba.

Entonces, para todos los que usan bootstrap, uno aquí es el opuesto:

.caret-up {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-bottom: 4px dashed;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}

Answer 2

Esto funcionó para mí:

transform: rotate(180deg);

Answer 3

Hay una clase de arranque incorporada que puede adjuntar al elemento padre de la clase de intercalación

<span class="dropup">
    <span class="caret"></span>
</span>

Funciona tanto en bootstrap 2 como en 3

Answer 4

Puedes agregar agregar una nueva clase css para la flecha hacia arriba

<style>
 .caret-up{
    border-bottom: 10px solid #000000;
    border-left: 6px solid rgba(0, 0, 0, 0);
    border-right: 6px solid rgba(0, 0, 0, 0);
    content: "";
    display: inline-block;
    height: 0;
    vertical-align: top;
    width: 0;
  }

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

Demostración http://jsfiddle.net/tbgXj/3/

Answer 5

Puedes hacer algo como esto:

en HTML:

<span class="caret caret-reversed"></span>

en CSS:

.caret-reversed{
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

Answer 6

Supongamos que desea revertir el símbolo de intercalación utilizando la clase caret-reversed , para que pueda mantener la implementación existente de la clase de caret .

El CSS sería el siguiente.

<span class="caret caret-reversed"></span> 

.caret.caret-reversed {
    border-top-width: 0;
    border-bottom: 4px solid #000000;
}

Funciona tanto para bootstrap 2 como para 3.

Actualización : desde Bootstrap 3.3.2, están disponibles los .glyphicon-triangle-top .glyphicon-triangle-bottom y .glyphicon-triangle-bottom glyphicons que pueden funcionar como alternativas a .caret y su versión inversa.

Normal

<span class="glyphicon glyphicon-triangle-bottom"></span>

Invertido

<span class="glyphicon glyphicon-triangle-top"></span>