Jump to content
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

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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!

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 gbL078
      Consegui resolver o problema, por favor podem deletar o tópico.
    • By andre2654
      Bom dia, peço humildemente a ajuda de vocês,
      Enfim, estou fazendo um exemplo de site, só para teste mesmo, onde terá uma janela principal perguntando em qual site a pessoa quer ir(1 só empresa, porém dois negócios) ai se a pessoa clicar em alguma das melecas, quero que ela abra mostrando o site, ou só uma imagem mesmo

    • By renato.tomio
      Criar um sistema de votação para uma premiação musical. Esse sistema deverá ser desenvolvido utilizando HTML + Javascript ES6.
       
       
      a) Existem 4 candidatos concorrendo ao prêmio:
      i) Rita Lee (número 100)
      ii) Cartola (número 101)
      iii) Ney Matogrosso (número 102)
      iv) Anitta (número 103)
      b) Para realizar a votação, o usuário terá que digitar seu CPF e o número do candidato.
      i) O usuário não pode votar duas vezes.
      ii) Se o usuário votar em um número inválido, o sistema contabilizará esse voto como nulo.
      c) Devido a um conflito da confraternização, a candidata Anitta foi desclassificada mas não deu tempo de retirá-la do painel de votação. Você terá que realizar uma validação avisado que o voto nela não é válido (dando a possibilidade desse mesmo usuário votar em outro candidato).
      d) O sistema deve mostrar automaticamente a quantidade e porcentagem de voto de cada candidato (parecido com o protótipo).
      i) O cálculo da porcentagem dos candidatos deverá desconsiderar os votos nulos
      LINK DO PROTOTIPO: https://www.figma.com/proto/S8tKx3hDbJJNaWJ9WFjzINVY/Prova?node-id=0%3A1&viewport=766%2C1015%2C0.5&scaling=scale-down&redirected=1
    • By ianluis
      Layout Responsivo Desalinhado: Estou criando um site de filmes e a cada momento que incluo algo o layout se estica para a direita ficando impossível de concertar sou novato e não sei onde estou errando me ajudem.
       
      Estou tentando criar um site de filmes responsivo mais o layout estar completamente desalinhado estirando a todo momento que incluo alguma  imagem para a direita me ajudem por favor.
       
       
      Codigo CSS abaixo:
       
      *{
          
        padding: 0px;
        margin: 0px;
      }
      a{
          text-decoration:none;
          color:#999;
      }
      body{
          font-family: arial;
          color:#eaeeef;
          background-color: #36454f; /*Fundo Escur0*/ 
          margin-left: -100px;
          margin-top: -16px;

      }
      .font400{
      font-size: 4em;

      }
      .font350{
      font-size: 3.5em;
      }     

      .font300 {
      font-size: 3em;
      }
      .font200 {
      font-size: 2em;
      }
      .font180 {
      font-size: 1.8em;
      }
      .font12{
          font-size:12px;
      }

      .font10{
          font-size:10px;
      }
      .font18{
          font-stretch: 18px;
      }
      .branca{
          color:#FFFFFF
      }

      .cinza {
          color: #CBCCCD;
      }
      .vermelho_1{
          color:#ff0000;
      }
      ul{
          list-style:none;
      }
      /*Imagem do Menu*/
      img{
          width:35px;
          margin-left: 100px;
          margin-top: 10px;
          
      }
      input[type="checkbox"]
          
      {
          display:none;
      }
      nav
      {
          background-color: rgba(16,16,16,.5);
          width:150px;
          height:100%;
          left: -150px;
          position: absolute;
          transition: all .5s;
          
          
      }
      input[type="checkbox"]:checked ~ nav
      {
          transform: translateX(150px);
      }
      ul{
          top:80px;
          position:absolute;
          width: 100%;
      }
      a{
          
          background: block;
          padding:10px 5px;
          color: white;
      }
      a:hover{
           background-color: rgba();
           color: black;
      }
      label{
          padding: 15px;
          position: absolute;
          z-index:1;
          /*icone*/
      }

      /* Formatação de chamada principal da imagem em destaque*/
      .chamada{
          background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(https://img.youtube.com/vi/NOEQ7wVKIew/maxresdefault.jpg);
          background-position: center center; /* Centraliza a imagem no centro da tela*/
          background-repeat: no-repeat;/* Não repete a imagem*/
          background-size: cover; /* Ocupa toda a tela sem distorcer a imagem*/
          background-attachment: fixed;
          height: 100vh; /*100% do view height*/
          display: flex; 
      }   
      .area_chamada {
          margin: auto;
          margin-bottom:150px;
          text-align: center;
      }
      h2 {
          margin: 0px;
      }
      .titulo{
           font-family: 'Open Sans', sans-serif;
           text-transform: uppercase;
           line-height: 1.1em;
           font-weight: 400;
           text-shadow: 2px 3px 0px rgba(0,0,0,.8);
           color: #CBCCCD;
           
           
      }
      .subtitulo{
          font-family: 'Open Sans', sans-serif;
          text-transform: uppercase;
          line-height: 1.1em;
          font-weight: 400;
          text-shadow: 2px 3px 0px rgba(0,0,0,.8);
          height: 80px;
      }
      .parte_superior{
          /*banner de 280px na largura e 120px*/
          width: 100vw;
          height: 0px;
          display: flex;
          align-items: center;
          margin-top: 17px;
          margin-left: 50px;

      }
      /*imagem do logo*/
      .logo> img {
           width:250px;
           margin-top: 0px ;
                margin: 160px;
           
      }
      .pesquisa {
       width:500px;
       height:40px;
       margin:200px auto;
       display: flex;
       margin-top: 80px;
       margin-left: 40px;
       border-bottom-width: 2px;
      }
      #texto {
       width:520px;
       height:50px;
       float:left;
       font-family:Arial, Helvetica, sans-serif ;
       font-size:18px;
       background: #151515;
       border: #151515;
       border-radius: 6px 0px 0px 6px;
       display: flex;
       color: white;
       justify-content: space-around;
       
      }
      #texto:focus {
       border: solid 2px #1f1f1f;

      }
      .btn {
       height:34px;
       width:17px;
       background:#ff0000;
       padding:6px 8px;
       cursor:pointer;
       display: flex;
       margin-top: -10px;
       border: solid 0px #ff0000;
       border-radius: 0px ;
       margin-left: 0px;
       
      }
      button{
          padding: 12px;
          border-width: 0px;
          border-radius: 0px 6px 6px 0px;
          height: 50px;
          background: #ff0000;
          width: 60px;
      }
         
         /*Move todo o Slide*/
      .miniaturas{
          
           height: 290px;
               width: 180px;
               display: flex;
               padding: 0px 2%;
               margin-top: -250px;
               margin-left: 90px;
               margin-top: -100px;
      }
      /*Move todo o menu do slide*/
      .horizontal{
             display: flex;
             justify-content: center ;
              margin-left: 70px;
             justify-content: space-around;
             width: 200px;
             color: dimgrey;
             margin-top: 450px;
              
      }
      .ativo{
          margin:0px;
          color:white;
      }
           
         .black_clover> img{
               
               height: 290px;
               width: 180px;
               display: flex;
               margin: 10px;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;
               }
      .black_clover > img:hover{
          opacity: 0.2;
      }

      .one_punch_man> img{
               height: 290px;
               width: 180px;
               display: flex;
               margin: 10px;
                position: relative;
               z-index: 1;
               transition: all 0.5s linear;
        }     
          .one_punch_man > img:hover{
          opacity: 0.2;
      }
      .Dororo> img{
          height: 290px;
               width: 180px;
               display: flex;
               margin: 10px;
                position: relative;
               z-index: 1;
               transition: all 0.5s linear;
        }     
          .Dororo > img:hover{
          opacity: 0.2;
      }
      .shingek_3>img{
            height: 290px;
               width: 180px;
               display: flex;
               margin: 10px;
                position: relative;
               z-index: 1;
               transition: all 0.5s linear;

        }     
          .shingek_3 > img:hover{
          opacity: 0.2;
      }
      .Mob>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin: 10px;
                position: relative;
               z-index: 1;
               transition: all 0.5s linear;

        }     
          .Mob > img:hover{
          opacity: 0.2;

      }
      .kimetsu_no_yaiba>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .Kimetsu_no_yaiba > img:hover{
          opacity: 0.2;  
      }
      .figuras {
          display: flex;
          margin-left: 50px;
          justify-content: space-between;
          padding: 4%;
          height: 290px;
          width: 180px;

          
          }
              figure {
                    margin: 0px;
                    display: flex;

      }
      figcaption{
          width: 180px;
          height: 290px;
          background-color: black;
          display: flex;
          min-height:290px;
          margin: 10px;
          margin-top: -300px;
          
      }

      .grana{
          display: flex;
      }
      .baner{
          padding-top:   100px;
          display: flex;
          
      }
      /*move o banner e a primeira coluna de animes*/
      .bittube>a>img{
          display: flex;
          width: 400px;
          margin: 0px 580px; 
          margin-top: 20px;

      }
      .posts{
          margin-top:  100px;
          padding: 0px -400px;
          display: flex;
          margin-left: 180px;
          

      }
      .primeira{
          display: flex;
      }

      .primeira > ul > li{
          display:inline-block;
          margin-top: 1220px;
          margin-left: 20px;
      }

      .One_Piece>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .One_Piece> img:hover{
          opacity: 0.2;  
      }
      .tate_no_yusha>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .tate_no_yusha> img:hover{
          opacity: 0.2;  

      }
      .naruto_shippuden>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .naruto_shippuden> img:hover{
          opacity: 0.2;  

      }
      .Nanatsu_no_taizai>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .Nanatsu_no_taizai> img:hover{
          opacity: 0.2;  

      }
      .dragon_ball_super>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .dragon_ball_super> img:hover{
          opacity: 0.2;  

      }
      .boku_no_hero_academia>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .boku_no_hero_academia> img:hover{
          opacity: 0.2;  
      }
       /*Move toda a segunda coluna de animes*/
      .coluna{
          margin-top:   50px ;
          margin-left: 180px;
          display: flex;
      }
      .segunda{
          display: flex;

      }

      .boruto>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .boruto> img:hover{
          opacity: 0.2;  

      }

      .isekai_maou>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .isekai_maou> img:hover{
          opacity: 0.2;  

      }

      .bleach>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .bleach> img:hover{
          opacity: 0.2;  

      }

      .fairy_tail>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .fairy_tail> img:hover{
          opacity: 0.2;  
      }

      .tensei_shitara>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .tensei_shitara> img:hover{
          opacity: 0.2;  
      }

      .Tokyo_Ghoul>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .Tokyo_Ghoul> img:hover{
          opacity: 0.2;  

      }
       /*Move toda a  coluna de séries*/
      .coluna_series{
          margin-top:   120px ;
          margin-left: 180px;
          display: flex;
      }
      .primeira_series{
          display: flex;

      }

      .primeira_series > ul > li{
          display:inline-block;
          margin-top: 2020px;
          margin-left: 20px;
      }

      .Atirador>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .Atirador> img:hover{
          opacity: 0.2;  
      }

      .Game_of_thrones>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .Game_of_thrones> img:hover{
          opacity: 0.2;  
      }

      .La_casa_de_papel>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .La_casa_de_papel> img:hover{
          opacity: 0.2;  
      }

      .lucifer>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .lucifer> img:hover{
          opacity: 0.2;  
      }

      .sons_of_anarchy>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .sons_of_anarchy> img:hover{
          opacity: 0.2;  
      }

      .vikings>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .vikings> img:hover{
          opacity: 0.2;  

      }
       /*Move toda a  coluna de séries*/
      .coluna_series2{
          margin-top:   50px ;
          margin-left: 180px;
          display: flex;
      }
      .segunda_series2{
          display: flex;

      }

      .segunda_series2 > ul > li{
          display:inline-block;
          margin-top: 2020px;
          margin-left: 20px;
      }

      .The_purge>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .The_purge> img:hover{
          opacity: 0.2;  
          }

      .titans>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .titans> img:hover{
          opacity: 0.2;  
          }

      .the_big_bang_theory>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .the_big_bang_theory> img:hover{
          opacity: 0.2;  
          }

      .o_último_guardião>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .o_último_guardião> img:hover{
          opacity: 0.2;  
          }

      .legends_of_tomorrow>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .legends_of_tomorrow> img:hover{
          opacity: 0.2;  
          }

      .chernobyl>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .chernobyl> img:hover{
          opacity: 0.2;  

      }
       /*Move toda a  coluna de séries*/
      .coluna_fimes{
          margin-top:   120px ;
          margin-left: 180px;
          display: flex;
      }
      .segunda_filmes{
          display: flex;

      }

      .segunda_filmes > ul > li{
          display:inline-block;
          margin-top: 2820px;
          margin-left: 20px;
      }

      .avangers_Age>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .avangers_Age> img:hover{
          opacity: 0.2;  
          }

      .capitan_marvel>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .capitan_marvel> img:hover{
          opacity: 0.2;  
      }

      .capitao_america>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .capitao_america> img:hover{
          opacity: 0.2;  
          }

      .guerra_civil>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .guerra_civil> img:hover{
          opacity: 0.2;  
          }
      .doutor_estranho>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .doutor_estranho> img:hover{
          opacity: 0.2;  
          }

      .hulk_o_inacreditavel>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .hulk_o_inacreditavel> img:hover{
          opacity: 0.2;  
          }
      .coluna_fimes1{
          margin-top:   50px ;
          margin-left: 180px;
          display: flex;
      }
      .segunda_filmes1{
          display: flex;

      }

      .segunda_filmes1> ul > li{
          display:inline-block;
          margin-top: 2820px;
          margin-left: 20px;
      }
      .iron_man>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .iron_man> img:hover{
          opacity: 0.2;  
          }
          .thor>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .thor> img:hover{
          opacity: 0.2;  
          }
          .a_lenda_do_golem>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .a_lenda_do_golem> img:hover{
          opacity: 0.2;  
          }
          .maligno>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .maligno> img:hover{
          opacity: 0.2;  
          }
          .as_trapaceiras>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .as_trapaceiras> img:hover{
          opacity: 0.2;  
          }
          .homem_de_ferro2>img{
          height: 290px;
               width: 180px;
               display: flex;
               margin:10px ;
               position: relative;
               z-index: 1;
               transition: all 0.5s linear;  
        }     
          .homem_de_ferro2> img:hover{
          opacity: 0.2;  
          }

          .rodape{
              padding: 25px;
              color: white
              font-size:1.5em;
              display: flex;
              padding-top:   3600px;
              padding-left: 350px;

          }
          .rodape li{
              margin-right:20px;
              padding-top: 50px;
              
          }
          .parceria{
              display: flex;
              padding-top:   3600px;
              padding-left: 350px;
              }
          .parceria li{
              margin:-20px 10px;
              display:flex;
       
       
       
      <<<<<<<<Codigo Html abaixo>>>>>>>>
×

Important Information

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