es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Crear un triángulo con dirección dinámica CON SCSS

25 Jul, 2023 Programación

Por favor, necesito ayuda para crear una dirección dinámica de un triángulo con SCSS. Estoy usando un mixin pero no me está funcionando.

Archivo HTML:

<div class="arrow-div">Flecha</div>

Archivo SCSS:

.arrow-div{
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
  margin: 50px auto;
  border:1px solid #ccc;
  position: relative;
  @include arrow(red,-40px,null,null,50%,top,translateX(-50%));
}

@mixin arrow($color,$top,$right,$bottom,$left,$dir,$translate){
  position:absolute;
  content:"";
  border: 20px solid transparent;
  position:$dir;
  top:$top;
  right:$right;
  bottom:$bottom;
  left:$left;
  transform: $translate;
  border-#{$dir}-color: $color;
}

Este es mi código: https://codepen.io/aminanba/pen/XWegBbx

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Es difícil determinar el problema exacto sin saber cuál es el resultado deseado y qué específicamente no está funcionando, pero aquí hay algunos consejos generales de solución de problemas:

    • Asegúrese de que la mezcla (mixin) se esté importando y llamando correctamente.
    • Verifique que los valores de las variables que se pasan a la mezcla sean válidos.
    • Asegúrese de que los atributos CSS aplicados por la mezcla no estén siendo anulados por otros estilos en la hoja de estilos o en otras hojas de estilo.
    • Verifique nuevamente que la estructura HTML deseada y los nombres de clase sean correctos y coincidan con los mencionados en el SCSS.

    También puede ser útil intentar simplificar el código y dividirlo en partes más pequeñas para aislar el problema. ¡Buena suerte!

Comments are closed.