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 isaque_cb2
      Olá! eu estava aqui fazendo meu site, quando me deparei com o problema de fazer um menu "bonito" baixei este template depois de ver o exemplo na net, mas ele é muito complicado pra mim, não sou profissional (mas sou programador iniciante em c#)
      TEMPLATE
      mas se alguém puder me ajudar a criar uma pagina deste tipo, sem tantos códigos, eu agradeço, pois do jeito que está eu não consigo nem alterar as cores...
      pode ser com tutoriais, dicas, videos, etc...
       
      ~Grato desde já~
    • Por matheusmacias
      Alguém sabe resolver isso?

    • Por fabioseco
      Ola pessoal, meu dw cs6 não tem as tags de css flexbox.
      Alguém sabe como adiciona-las no dw cs6???
    • Por Solo
      Boa noite  pessoal, estou com um problema, sou iniciante me php e estou em duvida com como posso fazer uma paginacao de produtos do banco de dados...... alguem poderia me ajudar ou me indicar um tutorial ???
       
      <?php
      error_reporting(0);
      ini_set(“display_errors”, 0 );
      require_once("conexao.php"); 
         $produtos = "SELECT produto_ID, nome_produto, imagem_produto, valor ";
          $produtos .= "FROM produto ";
          $resultado = mysqli_query($conecta, $produtos);
          if(!$resultado) {
              die("Falha na consulta ao banco");   
          }
      ?> 
       
       
       
      AONDE LISTA OS PRODUTOS 
       
       
       
          <div class="rowproducts">
          <div id="listagem_produtos2" class="">
            <?php while($linha=mysqli_fetch_assoc($resultado)) {   ?>
                       
                      <ul>
                          <div class="class22">
                          
                          <li>
                              
                              <img  class="img-responsive"  height="200" width="200" src="<?php echo $linha["imagem_produto"]?> "  >
                              </li>
                              
                              <li class="nproduto"><?php echo $linha["nome_produto"]?></li>
                               <li class="nproduto">R$ <?php echo $linha["valor"]?></li>
                          </div>
                          </ul>
                          
                          
                          
                          
                          
                          
                          
                      
                  <?php } ?>
                      
                      
                      
                    </div>
                    </div>
       
       
       
       
    • Por Kelly Ferracine
      Adcionei um relógio no site, mas quando atualizo a pagina ele some e logo aparece, isso ta causado problema, pois a div abaixo sobe fazendo ficando esquisito, alguém poderia me ajudar?? Agradeço a atenção
×

Informação importante

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