0
272
Views¿Cómo hacer una burbuja de chat extensible en Javascript?
Me gustaría hacer una forma de chat de burbuja extensible en Javascript. Debe tener un degradado de color como fondo y la posibilidad de agregar un borde alrededor de la forma. El resultado sería algo como esto:
La parte redondeada sería estirable y el triángulo permanecerá en el medio del mismo tamaño.
He probado estos enfoques:
Dibuja SVG con
clipPaths. El problema aquí era que el triángulo no se mantenía en la misma forma (se estaba estirando).clip-pathCSS. El problema aquí fue que no logré dibujar este tipo de forma usando formas básicas. desafortunadamente,clip-pathno admite múltiplesclip-patha la vez.Dibuja burbujas en el
canvasy utilízalas como fondo. Como la burbuja debe estirarse en función del contenido que contiene, el problema es obtener eventos cuando el contenido cambia de tamaño y activar elredrawdel lienzo.
Por ahora, el enfoque de canvas podría ser el más fácil, pero tal vez haya otras soluciones que me faltan.
1 answers
Answer question0
Puedes usar ::after para lograr el resultado
.message { display: inline-block; height: 120px; width: 130px; border-radius: 8px; position: relative; background: rgb(2, 0, 36); background: linear-gradient(10deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%); } .message::after { content: ""; background-color: black; height: 16px; width: 16px; position: absolute; bottom: -4px; left: 50%; transform: translate(-50%) rotate(45deg); } <div class="message"></div>