Caja de flecha con CSS

¿Cómo puedo hacer esta caja en CSS?

He visto algunos tutoriales que enseñan cómo crear cuadros con flechas, sin embargo, en mi caso, ninguno de esos tutoriales es adecuado.

caja

Creé tu elemento con el borde circundante de 1px. Estoy usando un elemento

y aprovecho los pseudo-elementos :before y :after ( navegador-soporte ). El rectángulo principal tiene un borde regular de 1px, pero los elementos del triángulo son esencialmente 2 triangularjs, uno más oscuro que el otro.

El triángulo más claro se encuentra sobre el triángulo más oscuro, que tiene el efecto de ocultarlo, y se desplaza ligeramente hacia la izquierda para mostrar el triángulo más oscuro debajo. La ilusión resultante es un borde oscuro de 1px en el triángulo mismo.

Aquí hay una pregunta que hace una pregunta similar:

¿Cómo puedo crear una “cola de información sobre herramientas” usando CSS puro?

Una de las respuestas tiene una gran explicación de cómo se puede lograr este efecto de triángulo:

https://stackoverflow.com/a/5623150/196921

Además, esta es una referencia excelente para todas las cosas elegantes que puedes hacer con bordes ( gracias a PSCoder ):

… y aquí hay un dulce generador de CSS ( gracias a David Taiaroa ):


De todos modos, aquí está el código correspondiente:

  #arrow { width: 128px; height: 100px; background-color: #ccc; border: 1px solid #999; position: relative; } #arrow:after { content: ''; position: absolute; top: 0px; left: 128px; width: 0; height: 0; border: 50px solid transparent; border-left: 12px solid #ccc; } #arrow:before { content: ''; position: absolute; top: 0px; left: 129px; width: 0; height: 0; border: 50px solid transparent; border-left: 12px solid #999; } 
 

Aquí está la solución que creé

Hay 2 formas simples de hacer esto. La primera forma, menos eficiente, es tener 2 elementos. Aprovecho el :after pseudo elemento. Utilicé position:absolute en :after por 2 razones.

  1. Puede colocar el elemento donde necesita
  2. Impide que se corte el final del triángulo

La clave para crear el triángulo es usar la propiedad del border . Tienes 2 bordes con el color del conjunto transparent . Estas 2 fronteras son opuestas a la dirección que desea ir. Entonces, si quieres hacer un triángulo rectángulo, utiliza top y bottom . Lo que le da a la flecha su forma es el último borde. También va en la dirección opuesta. Entonces, para un triángulo rectángulo, usaría el border-left con un color. Para que esta sea la altura correcta, debe hacer la mitad de la altura de la caja en la que desea colocarla

SVG es la forma recomendada de crear tales formas. Ofrece simplicidad y escalabilidad.

Podemos usar el elemento de polygon o path SVG para crear una forma como la anterior y aplicarle un poco de color sólido, degradado o un patrón.

Solo un punto de atributo se usa para definir formas en un elemento de polygon . Este atributo consiste en una lista de puntos. Cada punto debe tener 2 números, una coordenada xy una coordenada ay. Una línea recta se dibuja automáticamente desde el último punto hasta el punto de partida para cerrar la forma.

A continuación se muestra el código necesario para crear esta forma:

  

A continuación hay una breve descripción del código anterior:

  • points atributo points define la estructura de la forma.
  • stroke atributo de stroke define el color para el contorno / borde.
  • stroke-width define el grosor del contorno / borde.
  • fill atributo de fill define el color de la forma interior que se debe llenar.

Imagen de salida:

Forma de polígono

Ejemplo de trabajo:

 body { background: #b6cdc7 url("https://www.hdwallpapers.net/previews/hot-air-balloon-over-the-mountain-987.jpg") no-repeat; background-position: center bottom; background-size: cover; margin: 0; } .box { justify-content: center; align-items: center; height: 100vh; display: flex; }