3

Buen día. Necesito hacer un div con forma de flecha en el margen derecho al estar activa dicha opción. Podrían darme una idea de comenzar de maquetarlo, y si estaría bien que utilice bootstrap 4, gracias.

Adjunto imagen referencial introducir la descripción de la imagen aquí

Al avanzar, pasará a poner como activo el siguiente capitulo. introducir la descripción de la imagen aquí

Gracias de antemano.

2 respuestas 2

5

Hacer un triangulo con CSS es sencillo usando bordes. Pones las dimensiones en 0 y creas un borde transparente que sea del mismo tamaño de la flecha que quieres lograr. Luego colorea uno de los bordes y tienes una flecha como la que quieres. Los pseudoelementos son ideales para crear la punta de la flecha.

.arrow-right {
  text-align: center;
  color: white;
  font-weight: bold;
  line-height: 100px;
  position: relative;
  width: 300px;
  height: 100px;
  background-color: red;
}

.arrow-right.active:after {
  content: '';
  position: absolute;
  left: 300px;
  width: 0;
  height: 0;
  /* esta es la parte importante */
  border: transparent solid 50px;
  border-left-color: red;
}

.arrow-left {
  text-align: center;
  color: white;
  font-weight: bold;
  line-height: 100px;
  margin-left: 50px;
  position: relative;
  width: 300px;
  height: 100px;
  background-color: red;
}

.arrow-left.active:before {
  content: '';
  position: absolute;
  left: -99px;
  width: 0;
  height: 0;
  /* esta es la parte importante */
  border: transparent solid 50px;
  border-right-color: red;
}
<div class="arrow-right">
  Texto menu izquierda
</div>
<br>
<div class="arrow-right active">
  Texto menu izquierda active
</div>
<br>
<div class="arrow-left">
  Texto menu derecha
</div>
<br>
<div class="arrow-left active">
  Texto menu derecha active
</div>

Realmente es muy sencillo de hacer así que puedes tener o no bootstrap incluido en la aplicación.

Incluí un texto para que se vea una vista previa porque como dices es un menú.

3
  • Gracias man, ¿Para la distribución del layout me recomiendas colocar un col-md-4 para el "sidebar" y un col-md-8 para el contenido?
    – Joe68
    Commented el 18 dic. 2018 a las 22:25
  • Si. Un par de detalles, cuando el menú está inactivo tienes que agregarle un margin en la dirección de la flecha para que tu menú no cambie de tamaño cuando esté inactivo. Para centrar el texto verticalmente, si necesitas hacerlo multilinea como en la foto mira esta respuesta de StackOverflow. Yo usé la técnica más sencilla porque era un ejemplo simple.
    – devconcept
    Commented el 19 dic. 2018 a las 14:18
  • @JoelSulcaCordova No olvides marcar la respuesta como aceptada si te sirvió
    – devconcept
    Commented el 21 dic. 2018 a las 17:16
1

Basandome en esta respuesta, adapté el código para que veas cómo varia el div basado en su clase active haciendo clic:

$(".box").click(function(){
  $(this).toggleClass("active");
});
.box {
  width: 400px;
  background-color: #307084;
  color: #fff;
  margin-bottom: 20px;
  padding: 10px;
  position: relative;
}
.box.active:before, .box.active:after {
  width: 20px;
  height: 50%;
  position: absolute;
  left: 100%;
  content: "";
}
.box.active:before {
  top: 0px;
  background: -webkit-linear-gradient(left bottom, #307084 50%, rgba(0, 0, 0, 0) 50%);
  background: linear-gradient(to right top, #307084 50%, rgba(0, 0, 0, 0) 50%);
}
.box.active:after {
  top: 50%;
  background: -webkit-linear-gradient(left top, #307084 50%, rgba(0, 0, 0, 0) 50%);
  background: linear-gradient(to right bottom, #307084 50%, rgba(0, 0, 0, 0) 50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box" style="font-size: 20px">
  css se adapta al tamaño del div
</div>

<div class="box" style="font-size: 25px;">
  css se adapta al tamaño del div
</div>

<div class="box active" style="font-size: 40px;">
  css se adapta al tamaño del div
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.