Ir para conteúdo
Rasp

Border radius inverso

Recommended Posts

Pessoal, bom dia.

Estou convertendo um layout de um cliente para responsivo. Durante a jornada, estou tirando vários elementos que foram desenvolvidos com imagens e os convertendo para CSS, porém, estou com uma dúvida: Como fazer um "border radius inverso" (conforme imagem anexo)?

Lembro de muito tempo atrás ter visto algo semelhante em algum blog (não me lembro se feito com css ou jquery), porém, não consigo encontrar ou não estou sabendo como pesquisar.

 

Alguém poderia me dar um help?

 

Obrigado!

borda.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá.

 

Eu ainda não conheço um jeito de criar essas bordas invertidas de um jeito prático.

O que você pode fazer é criar o elemento pai com position: relative e depois criar mais 4 elementos dentro dele, cada um posicionado em um canto utilizando position: absolute e com border-radius para dar o efeito.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@rikaschmitt de fato eu também não encontrei, por isso também disse que não recordava se era CSS ou Jquery. Depois do dia inteiro pesquisando, encontrei a solução em Jquery http://jquery.malsup.com/corner/

Ainda assim queria tentar alguma forma de solucionar em CSS. Sua solução é bem interessante e vou tentar.

 

Obrigado pela atenção!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por marcelocardoso
      Olá Colegas....

      Tenho o código abaixo que funciona perfeitamente, fiz algumas modificações no CSS e também no JQUERY, segue abaixo...
      O PROBLEMA é que ao dar um refresh na página, F5 no brownser, ele como DEFAULT se perde o background, ficando TRANSPARENT.

      1) Que é o modo que ele deve começar;
      2) Mas como ele muda após se o window for maior >=20, no jquery;
      3) Ao dar refresh, dependendo do lugar da página, ele deveria ficar o mesmo, mas fica sempre transparente;

      CODIGO HTML
      <nav class="navbar navbar-light navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar_menu" aria-expanded="false"> <span class="fa fa-bars"></span> </button> <a href="http://" class="navbar-brand brand-centered"> <img src="img/logo.png" class="img-responsive"> </a> </div> <div class="collapse navbar-collapse" id="navbar_menu"> <ul class="nav navbar-nav navbar-right"> <li><a href="#mn_empresa">EMPRESA</a></li> <li><a href="#mn_clientes">CLIENTES</a></li> <li><a href="#mn_formulario">CONTATO</a></li> </ul> </div> </div> </nav>
      CODIGO CSS
      /* NAVBAR */ .navbar { padding-top: 5px; padding-bottom: 12px; background-color: transparent; margin: 0px; color: #333; transition: all 0.3s; z-index: 9999; -webkit-box-shadow: 0px 0px 5px -1px rgba(171, 171, 171, 1); -moz-box-shadow: 0px 0px 5px -1px rgba(171, 171, 171, 1); box-shadow: 0px 0px 5px -1px rgba(171, 171, 171, 1); } /* NAVBAR - efeito simples dos itens do menu */ .navbar-nav a, .navbar-nav a.active { color: #00224b !important; background-color: transparent; font-size: 15px; font-weight: 600; width: 100%; -moz-transition: all .3s; -o-transition: all .3s; -webkit-transition: all .3s; transition: all .3s; } .navbar-nav li a:hover, .navbar-nav li.active a { color: #f4511e !important; background-color: white; font-weight: 600; width: 100%; } /* NAVBAR - toggle button */ .navbar-light .navbar-toggle { border: none; border-radius: 40px; width: 40px; height: 40px; font-size: 20px; z-index: 12; background-color: dodgerblue; color: white; cursor: pointer; -moz-transition: all .8s; -o-transition: all .8s; -webkit-transition: all .8s; transition: all .8s; } .navbar-light .navbar-toggle:hover { background-color: #f6761c; border-radius: 40px 0px 40px 40px; color: white; } /* NAVBAR - mudanças jquery */ .navbar-brand.nav_corlogo { height: auto; filter: brightness(0) invert(1) !important; } .navbar-nav.nav_cormenu a, .navbar-nav.nav_cormenu a.active { color: white !important; } .navbar-nav.nav_cormenu li a:hover, .navbar-nav.nav_cormenu li.active a { color: #ff9326 !important; background-color: transparent; } .navbar.nav_sombra { -webkit-box-shadow: 0px 2px 12px -1px rgba(31, 31, 31, 0.39); -moz-box-shadow: 0px 2px 12px -1px rgba(31, 31, 31, 0.39); box-shadow: 0px 2px 12px -1px rgba(31, 31, 31, 0.39); border-bottom: 2px solid rgba(118, 0, 191, 0.56); } .navbar.nav_comprime { padding-top: 10px; padding-bottom: 10px; background: #002a5c; color: white; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5); -moz-transition: all .4s; -o-transition: all .4s; -webkit-transition: all .4s; transition: all .4s; } .navbar.nav_slide { background-color: transparent !important; } /* NAVBAR - config do logotipo imagem e logo texto */ .navbar-brand { padding: 4px; position: absolute; font-size: 1.25rem; white-space: nowrap; } .navbar-brand>img { padding: 0px; width: 16%; } .navbar-brand:focus, .navbar-brand:hover { text-decoration: none; color: white }
      CODIGO JQUERY
       
      $(function () { $(window).on('scroll', function () { if ($(this).scrollTop() >= 20) { $('.navbar').addClass('nav_comprime'); $('.navbar').addClass('nav_sombra'); $('.navbar-nav').addClass('nav_cormenu'); $('.navbar-brand').addClass('nav_corlogo'); } else { $('.navbar').removeClass('nav_comprime'); $('.navbar').removeClass('nav_sombra'); $('.navbar-nav').removeClass('nav_cormenu'); $('.navbar-brand').removeClass('nav_corlogo'); } }); $('.navbar a').on('click', function () { if (window.innerWidth <= 768) { $('.navbar-toggle').trigger("click"); } }); //função que troca em resoluções menores o logotipo $(window).resize(function () { if ($(window).width() < 481) { $('#logotipo').attr('src', '../site/img/simbolo.png'); } else { $('#logotipo').attr('src', '../site/img/logo_-_original.png'); } }); $(".navbar a, footer a[href='#wrapper']").on("click", function (event) { event.preventDefault(); var hash = this.hash; $("html, body").animate({ scrollTop: $(hash).offset().top }, 800, function () { window.location.hash = hash; }); }); }); Se conseguirem me dar uma luz, agradeço.
      Posso estar errando no CSS ou JQUERY.
      Obrigado.


       
    • Por LuizH.M
      Gostaria q pudessem me ajudar
      HTML
      <div class="container">
          <nav class="menu">
              <ul>
                  <li><a href="index.php">Home</a></li>
                  <li><a href="agenda.php">Agenda</a></li>
                  <li><a href="departamento.php">Departamento</a></li>
                  <li><a href="https://www.flickr.com/photos/142117425@N02/" target="blanck">Fotos</a></li>
                  <li><a href="#localizacao">Localização</a></li>
                  <li><a href="https://www.facebook.com/deives.duarte.9"  target="blanck" class="fa fa-facebook"></a></li>
                  <li><a href="#" target="blanck" class="fa fa-twitter"></a>
                  <li><a href="#" class="fa fa-youtube"></a>
              </ul>
          </nav>
      </div>
       
       
       
      CSS
       
      .container {
          position: absolute;
          margin: 20px;
          width: auto;
      }
      .menu{
          width:100%;
          height:auto;
          background-color: #333;
          font-family:'Arial';
      }
      .menu ul{
          list-style:none;
          position:relative;
          background-color: #333;
      }
      .menu ul li{
          width: auto;
          height:auto;
          float:left;
      }
      .menu a{
          padding:15px;
          text-decoration:none;
          text-align:center;
          color:#fff;
      }
      .menu a:hover{
          background-color:#f4f4f4;
          color:#555;
      }
       
       
    • Por guzulino
      Boa tarde pessoal, eu estou desenvolvendo um projeto no qual ele deve ter um sistema de post de notícias, eu comecei a pesquisar e percebi que seria muito complicado fazer na mão passo a passo, então comecei a ver como funcionam os posts dos fóruns, tipo o iMasters mesmo, bem nesse mesmo sentido, gostaria de saber se alguém tem alguma luz de como consigo criar isso, estou tentando achar algum framework que eu consiga editar para ficar como eu quiser mas está complicado conseguir algum, se alguém souber de alguém só postar aí. Valeu.
    • Por manoelahech
      Boa noite pessoal, estou a mais de 3 semanas com um trabalho e está impossivel resolver. Segue a questão
      // Escreva um programa que leia 4 arquivos de numeros inteiros, calcule a média.
      //Mostre o maior quadrado que seja menor que a média de todos os números maiores que a média dos números de cada um dos arquivos.
      //Ex: Média dos números do arquivo 01 = 35
      //Números do arquivo 01 que são maiores que 35 = Ni...Nn
      //Maior quadrado entre os N números do arquivo 01 = x.
      A baixo vou colocar 2 tentativas que não saem da parte de calcular a media, como posso calcular a segunda parte??
      TENTATIVA 01
      #include <stdio.h>
      #include <stdlib.h>
      main(){

      FILE *numeros, *maior, *menor, *medio;
      int numero;
      float media;
      //abertura dos arquivos
      numeros = fopen ("numeros.txt", "r");
      maior = fopen ("maior.txt", "w" );
      medio = fopen ("medio.txt" , "w");
      menor = fopen ("menor.txt" , "w");
      //leitura dos dados e gravação do arquivo 
      while (fscanf (numeros , "%i %f" , &numero , &media)!= EOF){
      if (media >= 6)
      fprintf (maior,"%i %4.1f\n",numero,media);
      else
      fprintf (medio,"%i %4.1f\n",numero,media);

      //fechando os arquivos
      fclose (numeros);
      fclose (maior);
      fclose (medio);
      fclose (menor);
      }
      TENTATIVA 02 (ACHO QUE A MELHOR)
      #include <stdio.h>
      #include <stdlib.h>
      #include <string.h>
      #include <stdlib.h>
      #define TAM_MED 50  //tamanho na média
      #define M 4 //número de arquivos
      #define TRUE 1
      #define FALSE 0

      int leitura( int id, int medi){
          
          int id_num, id_num2, id_num3, id_num4;
          int med;
          
          FILE* numeros = fopen ("numeros.txt","r");
          FILE* numeros2 = fopen ("numeros2.txt", "r");
          FILE* numeros3 = fopen ("numeros3.txt", "r");
          FILE* numeros4 = fopen ("numeros4.txt", "r");
          
          
          
          if (numeros != NULL){
              while (fscanf(numeros, "%d\n", &id_num, med) != EOF){  //End of file
                  printf("%d\n", id_num, med);
              }
              
                  if (numeros != NULL){
              while (fscanf(numeros2,"%d\n", &id_num2,med) != EOF){  //End of file
                  printf("%d\n", id_num2,med);
              }
              
                      if (numeros != NULL){
              while (fscanf(numeros3,"%d\n", &id_num3,med) != EOF){  //End of file
                  printf("%d\n", id_num3,med);
              }
              
                  if (numeros != NULL){
              while (fscanf(numeros4,"%d\n", &id_num4,med) != EOF){  //End of file
                  printf("%d\n", id_num4,med);
              }
          }
         fclose (numeros);
         fclose (numeros2);
         fclose (numeros3);
         fclose (numeros4);
         
         return 0;
      }
      }
      }
      }
      int main(){
          
          int id_num, id_num2, id_num3, id_num4;
          
          printf("Digite o primeiro numero: %d");
          scanf("%d", &id_num);
          printf("Digite o segundo numero: %d");
          scanf("%d", &id_num2);
          printf("Digite o terceiro numero: %d");
          scanf("%d", &id_num3);
          printf("Digite o quarto numero: %d");
          scanf("%d", &id_num4);
          
             printf("Media: %f", (float) (id_num + id_num2+ id_num3+ id_num4)/4);
             return 0;
             
             
      }
       
    • Por Donghaki
      Pessoal, sou meio newbie na área, e tô voltando com um projeto antigo que foi desenvolvido por alguns amigos junto a mim. 
      O projeto, resumindo, é um simulador de habilidades. Na página principal temos quatro botões onde, um aumenta o nível da habilidade para o máximo, o outro aumenta de um em um, e os outros dois tem essa mesma função só que diminuindo. 
       
      O problema começa aí... tínhamos criado uma ferramenta (acho que é tooltip que chama), onde você passaria o mouse em cima dos três últimos botões, e abriria uma caixinha flutuante mostrando a descrição da habilidade (nível, mana necessária, resfriamento e afins), só que ao chegar no botão que fica no parte direita, a caixa não se adapta e vira o lado para que a descrição possa ser mostrada, ao invés disso, ela entra atrás da barra de rolagem e fica cortada, isso também acontece no final da página, quando a caixinha mostra duas descrições da habilidade. 
       
      Gostaria de saber se há algum modo de tornar a ferramenta adaptativa, para quando chegar nesses "extremos" da página, a caixa mudar o lado para que o usuário possa ver o que está escrito.
       
      Basicamente, todo o código dela dentro do html/css é este:
       
      #hintbox{
          opacity: 0.95;
          display: none;
          position: fixed;
          height: 450px;
          width: 250px;
          font-size: 10 px;
          background-color: #161616;
          color: #fff;
          padding: 8px;
          border-radius:9px;
          text-align: left;
          word-wrap: break-word; 
          font-family:Verdana;     
        }      
       
       

                  $(document).ready(function () {
                      $('.downArrow,.upArrow,.dupArrow').mousemove(function (e) {
                          if (popUPCheck($(this).attr('nmbr'), $(this).attr('class')))
                              $('#hintbox').html(popUP($(this).attr('nmbr'), $(this).attr('class'))).show();
                          $('#hintbox').css('top', e.clientY + 15).css('left', e.clientX + 15);
                      })
                          .mouseout(function () {
                              $('#hintbox').hide();
                          });
                  });
       
      Também tem uma parte em javascript
       
      function popUP(lvl, arrow) {
          var CDHere = CDValue;
          if(lvl == 16 && chosenClass == "Warrior"){
              CDHere = 1;
          }
          var lastCheck = maxPoints[lvl] - 1;
          
          if(lastCheck<0){
              lastCheck = 0;
          }
          var name = "<div class='title'>" + skillDescription[lvl] + "</div>";
          var currentLevel = "<div class='yellow'>[Nível atual]</div>  Nível necessário : " + skillLevel[lvl][skillPoint[lvl] - 1];
          var nextLevel = "<div class='green'>[Próximo nível]</div> Nível necessário : " + skillLevel[lvl][skillPoint[lvl]];
          var skilldesc = "<div class='info'>" + skillInfo[lvl][skillPoint[lvl] - 1] + "</div>";
          var mpcurrent = "Mana necessária : " + mp[lvl][skillPoint[lvl] - 1];
          var cdcurrent = "Resfriamento : " + (CDHere * cd[lvl][skillPoint[lvl] - 1]).toFixed(0) + " sec";
          var castingcurrent = "Tempo de lançamento : " +  cast[lvl][skillPoint[lvl] - 1] + " sec";
          var skilldescnext = "<div class='info'>" + skillInfo[lvl][skillPoint[lvl]] + "</div>";
          var mpnext = "Mana necessária : " + mp[lvl][skillPoint[lvl]];
          var cdnext = "Resfriamento : " + (CDHere * cd[lvl][skillPoint[lvl]]).toFixed(0) + " sec";
          var castingnext = "Tempo de lançamento : " + cast[lvl][skillPoint[lvl]] + " sec";
          var previousLevel = "<div class='red'>[Nível anterior]</div> Nível necessário : " + skillLevel[lvl][skillPoint[lvl] - 2]
          var skilldescPrev = "<div class='info'>" + skillInfo[lvl][skillPoint[lvl] - 2] + "</div>";
          var mpPrev = "Mana necessária : " + mp[lvl][skillPoint[lvl] - 2];
          var cdPrev = "Resfriamento : " + (CDHere * cd[lvl][skillPoint[lvl] - 2]).toFixed(0) + " sec";
          var castingPrev = "Tempo de lançamento : " + cast[lvl][skillPoint[lvl] - 2] + " sec";
          var lastLevel = "<div class='green'>[Próximo Nível]</div> Nível necessário : " + skillLevel[lvl][lastCheck];
          var skilldescLast = "<div class='info'>" + skillInfo[lvl][lastCheck] + "</div>";
          var mpLast = "Mana necessária : " + mp[lvl][lastCheck];
          var cdLast = "Resfriamento : " + (CDHere * cd[lvl][lastCheck]).toFixed(0) + " sec";
          var castingLast = "Tempo de lançamento : " + cast[lvl][lastCheck] + " sec";
          
          if (lvl == 8 || lvl == 9 || lvl == 19 || lvl == 22) {
              var allNextLevel = nextLevel + "<div class='passive'>Passiva</div>" + skilldescnext;
              var allCurrentLevel = currentLevel + "<div class='passive'>Passiva</div>" + skilldesc + "<br>";
              var allPreviousLevel = previousLevel + "<div class='passive'>Passiva</div>" + skilldescPrev + "<br>";
              var allLastLevel = lastLevel + "<div class='passive'>Passiva</div>" + skilldescLast + "<br>";
          } else if (cast[lvl][skillPoint[0]] == 0 ||!cast[lvl][skillPoint[0]] ) {
              var allCurrentLevel = currentLevel + "<br>" + mpcurrent + "<br>" + cdcurrent + "<br>" + skilldesc + "<br>";
              var allNextLevel = nextLevel + "<br>" + mpnext + "<br>" + cdnext + "<br>" + skilldescnext;
              var allPreviousLevel = previousLevel + "<br>" + mpPrev + "<br>" + cdPrev + "<br>" + skilldescPrev;
              var allLastLevel = lastLevel + "<br>" + mpLast + "<br>" + cdLast + "<br>" + skilldescLast;
          } else {
              var allCurrentLevel = currentLevel + "<br>" + mpcurrent + "<br>" + cdcurrent + "<br>" + castingcurrent + "<br>" + skilldesc + "<br>";
              var allNextLevel = nextLevel + "<br>" + mpnext + "<br>" + cdnext + "<br>" + castingnext + "<br>" + skilldescnext;
              var allPreviousLevel = previousLevel + "<br>" + mpPrev + "<br>" + cdPrev + "<br>" + castingPrev + "<br>" + skilldescPrev;
              var allLastLevel = lastLevel + "<br>" + mpLast + "<br>" + cdLast + "<br>" + castingLast + "<br>" + skilldescLast;
          }
       
      Alguém consegue dar um help? Segue também duas screenshots mostrando, uma no final da página, e a outra ao lado direito da página.
        
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.