Jump to content
Sapinn

Balões com html e css

Recommended Posts

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>

 

Share this post


Link to post
Share on other sites

Olá,

Onde tem bottom, você troca por top. Onde tem top, você troca por bottom


.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-bottom: 15px solid #fff;
    top: -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-bottom: 18px solid;
    border-bottom-color: inherit;
    top: -18px;
    margin-left: -18px;
}

Abraços!

Share this post


Link to post
Share on other sites

Eu adicionaria uma classe para manipular:

<body>
  <span class="bubble active arrow-bottom">Balão com borda</span>
  <span class="bubble active arrow-top">Balão com borda inverse</span>
</body>

CSS:

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.arrow-bottom:after,
.bubble.active.arrow-bottom: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;
}


.bubble.active.arrow-bottom:before {
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 18px solid;
    border-top-color: inherit;
    bottom: -18px;
    margin-left: -18px;
}

/* Trinagulo on top position*/
.arrow-top {
  margin-top: 100px;
}

.bubble.active.arrow-top:after,
.bubble.active.arrow-top:before {
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #fff;
    top: -15px;
    content: '';
    left: 80%;
    position: absolute;
  margin-left: -15px;
}

.bubble.active.arrow-top:before {
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-bottom: 18px solid;
    border-bottom-color: inherit;
    top: -18px;
    margin-left: -18px;
}







JSbin: https://jsbin.com/kikohozuba/edit?html,css,output

Share this post


Link to post
Share on other sites
1 hora atrás, wanderval disse:

Eu adicionaria uma classe para manipular:


<body>
  <span class="bubble active arrow-bottom">Balão com borda</span>
  <span class="bubble active arrow-top">Balão com borda inverse</span>
</body>

CSS:


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.arrow-bottom:after,
.bubble.active.arrow-bottom: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;
}


.bubble.active.arrow-bottom:before {
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 18px solid;
    border-top-color: inherit;
    bottom: -18px;
    margin-left: -18px;
}

/* Trinagulo on top position*/
.arrow-top {
  margin-top: 100px;
}

.bubble.active.arrow-top:after,
.bubble.active.arrow-top:before {
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #fff;
    top: -15px;
    content: '';
    left: 80%;
    position: absolute;
  margin-left: -15px;
}

.bubble.active.arrow-top:before {
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-bottom: 18px solid;
    border-bottom-color: inherit;
    top: -18px;
    margin-left: -18px;
}







JSbin: https://jsbin.com/kikohozuba/edit?html,css,output

 

Vlw meu parceiro agora deu certo

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Sapinn
      Fala galera, tudo blz? Então estou com uma dúvida um pouco boba mas que não consegui resolver o problema ainda. Estou desenvolvendo um site para agendamento de serviços e resolvi fazer a pagina principal como uma dashboard (área de administrador) onde seria muito mais fácil para o usuário registrar os serviços entre outras coisas, enfim, estou com um problema quanto ao layout da página. Normalmente o dashboard tem um menu à esquerda e o conteúdo  fica à direita quando ocorre o clique no botão hambúrguer( Aquele que tem três tracinhos) esse menu é recolhido e esse conteúdo que fica a direita fica centralizado, às vezes, em muitos dashboard esse menu só é um pouco recolhido ficando amostra apenas os ícones enquanto o conteúdo da direita fica um pouco mais centralizado. A pergunta é como eu posso fazer isso? Outra coisa, na responsividade quando a página diminui o menu da uma retraída e o conteúdo fica centralizado quando é clicado no botão hambúrguer o menu não afasta o conteúdo de volta e sim fica por cima desse conteúdo. Não sei como fazer isso, eu estou melhorando quando ao desenvolvimento front-end mas ainda não é muito a minha praia. Eu tentei fazer isso com css grid (que por sinal é algo que eu não tenho tanta pratica, já que eu sou melhor com flebox) mas não funcionou e o código só ficou ruim e confuso. Se alguém puder me ajudar ficaria muito grato
       
      Não tem muito coisa ainda mas irei disponibilizar o código que desenvolvi até agora:
       
      <!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>Sistema de Gerenciamento</title>     <link rel="stylesheet" href="assets/css/style.css">     <link rel="icon" href="assets/images/icone-logo.png">     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css"> </head> <body>     <header>         <div class="bar-header">             <i class="bi bi-list"></i>         </div>     </header>     <nav class="menu">         <div class="user">             <i class="bi bi-person-circle"></i>             <p>Nome do Usuário</p>         </div>         <ul>             <li class="active"><a href=""><i class="bi bi-house-fill"></i> Inicio</a></li>             <li><a href=""><i class="bi bi-calendar-plus-fill"> </i>Adicionar Serviço</a></li>             <li><a href=""><i class="bi bi-person-plus-fill"></i> Adicionar Admin</a></li>             <li><a href=""><i class="bi bi-file-earmark-post-fill"></i> Configurações de Nota</a></li>             <li><a href=""><i class="bi bi-file-person"></i> Configurações da Conta</a></li>             <li><a href=""><i class="bi bi-box-arrow-right"></i> Sair</a></li>         </ul>     </nav>     <main></main>     <footer></footer> </body> </html>  
       
      *{     padding: 0;     margin: 0; } body{     font-family: Arial, Helvetica, sans-serif;     background-color: #e5e5e5; } .bar-header{     background-color: #4285f4;     position: fixed;     color: #fff;     width: 100%;     height: 40px;     font-size: 37px;     padding: 8px 16px;     z-index: 1; } .menu{     background-color: #26353e;     width: 260px;     height: 100vh;     position: fixed;     padding-top: 65px; } .menu ul li{     list-style: none;     padding: 15px;     cursor: pointer;     border-bottom: 1px solid #26353e; } .menu ul li:hover{     background-color: #4285f4;      } .menu li a{     color: #fff;     font-size: 18px;     text-decoration: none;     } .menu i{     font-size: 27px; } .menu .active{     background-color: #4285f4; } .user{     margin-left: 50px;     padding-bottom:10px ; } .user i{     font-size: 120px;     color: #4285f4; } .user p{     font-weight: bold;     font-size: 18px;     color: #fff; }
       
    • By Sapinn
      Opa galera tudo beleza? Então criei um layout de um dashboard com css grid e eu gostaria de fixar o menu lateral na esquerda e a barra que está em cima e quando eu rolasse para baixo a unica coisa que mexesse fosse o conteúdo da direita. Já tentei usar o position fixed mas ele quebra a página, tentei usar o position: sticky mas ele não funciona. Alguém sabe como resolver isso ?
    • By programananet
      Quero vender códigos fontes de sites para empresas ou outras pessoas com um site fazendo a mediação !
      Existe um site onde podemos vender código fonte , se sim qual e como vendemos ?
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.