Pesquisar na Comunidade
Mostrando resultados para as tags ''balões''.
Encontrado 1 registro
-
Tenho um código de um balão de borda feito com html e css mas gostaria de saber como fazer para colocar a seta que está virada para baixo em cima do balão <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { padding: 140px 10px; text-align: center; } /* Criando o balão */ .bubble { background-color: #fff; border: 2px solid #333; border-radius: 5px; color: #333; display: inline-block; font: 16px/24px sans-serif; padding: 12px 24px; position: absolute; } /* Criando o triângulo */ .bubble.active:after, .bubble.active:before { border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 15px solid #fff; bottom: -15px; content: ''; left: 80%; margin-left: -15px; position: absolute; } /* Criando a borda do triângulo */ .bubble.active:before { border-left: 18px solid transparent; border-right: 18px solid transparent; border-top: 18px solid; border-top-color: inherit; bottom: -18px; margin-left: -18px; } </style> </head> <body> <span class="bubble active">Balão com borda</span> </body> </html>
