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 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
    • Por Alphb
      Oii, podem me ajudar
       
      Tipo com o <img>
      Eu adiciono a imagem tipo width:100%;
      Height:100%;
      Esses 100% não deveria ser 100% do width/height da imagem, mas ela ta ocupando os 100% da div até mesmo do body todo ._.
       
      Tipo eu quero deixar a imagem pequena mas proporcional 
      Pq não vai ser só uma imagem vai ser varias de tamanho diferente e ela ficam grande só com <img> sem CSS
      Já tentei Max-width/height, Min-width/height
      E não tou fazendo com PX pq se alguém acessar o site com um tablet o PX vai ser maior doq no smartphone._.
       
      E quando ta perfeito o height ta um pouquinho grande além do tamanho proporcional ao da width e fica aquela imagem meio esticada e fora de resolução
       
      Exemplo no facebook as imagens dos posts ficam proporcionais e quando não a imagem corta e se clicar na imagem fica tela cheia e a imagem fica perfeita sem perda
    • Por ghlevin
      Estou adaptando o site de um cliente de forma a torná-lo responsivo. Um fornecedor já me passou os arquivos referentes ao layout responsivo e estou tendo de adaptar ao meu site. Contudo, algumas páginas do meu site dão problema. Em uma delas, eu uso muito a função feita em javascript dialog. Acredito que seja algum conflito nos meus arquivos JS dentro do head.php
       
      head.php original:
      <?php if ($dados['pagina']['header'] == true) { ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <meta http-equiv="cache-control" content="max-age=0" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="0" /> <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> <meta http-equiv="pragma" content="no-cache" /> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="shortcut icon" href="<?php echo $dados['pagina']['raiz']?>images/layout/favicon2.ico"> <title>Portal do Investidor Intercity</title> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery-ui-1.8.23.custom.min.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.validate.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.spin.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flashcanvas/flashcanvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flashcanvas/canvas2png.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.plugin.html2canvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/html2canvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.multiselect.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/functions.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/principal.js"></script> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']?>js/fancybox/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen"/> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']?>js/ui-lightness/jquery-ui-1.8.23.custom.css" type="text/css" media="screen"/> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']?>css/jquery.multiselect.css" type="text/css" media="screen"/> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/fancybox/jquery.fancybox.pack.js?v=2.0.6"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.plugin.html2canvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.cookie.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flot/jquery.flot.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flot/excanvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/tinymce/jscripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.dataTables.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.twosidedmultiselect.js"></script> <script type="text/javascript"> jQuery.browser = {}; // Script incluído em 21/12/2018 (function () { jQuery.browser.msie = false; jQuery.browser.version = 0; if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) { jQuery.browser.msie = true; jQuery.browser.version = RegExp.$1; } })(); </script> <?php if (count(Loader::retornaJs()) > 0) { foreach(Loader::retornaJs() as $js) { ?> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']; ?>js/<?php echo $js; ?>.js"></script> <?php } } ?> <script type="text/javascript"> <?php if (count(Loader::retornaJsDados()) > 0) { foreach(Loader::retornaJsDados() as $jslib) { ?> <?php echo $jslib; ?> <?php } } ?> </script> <?php if (count(Loader::retornaCss()) > 0) { foreach(Loader::retornaCss() as $css) { ?> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']; ?>css/<?php echo $css; ?>.css" type="text/css" /> <?php } } ?> <style type="text/css"> <?php if (count(Loader::retornaCssDados()) > 0) { foreach(Loader::retornaCssDados() as $csslib) { ?> <?php echo $csslib; ?> <?php } } ?> </style> </head> <?php }?> head.php adaptado, onde fiz a inclusão de novos scripts e novos stylesheets (links):
      <?php if ($dados['pagina']['header'] == true) { ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <meta http-equiv="cache-control" content="max-age=0" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="0" /> <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> <meta http-equiv="pragma" content="no-cache" /> <html class="wide wow-animation smoothscroll scrollTo" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="shortcut icon" href="<?php echo $dados['pagina']['raiz']?>images/layout/favicon2.ico"> <meta charset="utf-8"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="keywords" content="SANA design multipurpose template"> <meta name="date" content="Dec 26"> <link rel="icon" href="http://www.investidorintercity.com.br/images/layout/favicon2.ico" type="image/x-icon"> <!-- Stylesheets--> <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Oswald%7CLato:400italic,400,700"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <title>Portal do Investidor Intercity</title> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery-ui-1.8.23.custom.min.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.validate.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.spin.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flashcanvas/flashcanvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flashcanvas/canvas2png.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.plugin.html2canvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/html2canvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.multiselect.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/functions.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/principal.js"></script> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']?>js/fancybox/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen"/> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']?>js/ui-lightness/jquery-ui-1.8.23.custom.css" type="text/css" media="screen"/> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']?>css/jquery.multiselect.css" type="text/css" media="screen"/> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/fancybox/jquery.fancybox.pack.js?v=2.0.6"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.plugin.html2canvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.cookie.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flot/jquery.flot.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flot/excanvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/tinymce/jscripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.dataTables.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.twosidedmultiselect.js"></script> <?php if (count(Loader::retornaJs()) > 0) { foreach(Loader::retornaJs() as $js) { ?> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']; ?>js/<?php echo $js; ?>.js"></script> <?php } } ?> <script type="text/javascript"> <?php if (count(Loader::retornaJsDados()) > 0) { foreach(Loader::retornaJsDados() as $jslib) { ?> <?php echo $jslib; ?> <?php } } ?> </script> <?php if (count(Loader::retornaCss()) > 0) { foreach(Loader::retornaCss() as $css) { ?> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']; ?>css/<?php echo $css; ?>.css" type="text/css" /> <?php } } ?> <style type="text/css"> <?php if (count(Loader::retornaCssDados()) > 0) { foreach(Loader::retornaCssDados() as $csslib) { ?> <?php echo $csslib; ?> <?php } } ?> </style> </head> <?php }?> Pelo console no Chrome, ele me avisa o seguinte:
      Uncaught TypeError: $(...).dialog is not a function O que eu poderia fazer pra não ter conflitos como esse? Já tentei a função noConflict(), mas não sei se fiz ela corretamente. Quem pode me ajudar?
    • Por Solo
      estou aprendendo css e html ainda,  estou fazendo um site para praticar, porem to apanhando muito.
       
       
      Estou puxando do meu banco de dados o nome dos meus produtos juntamente com as suas imagens, para fazer uma lista visual simples ao usuario do que esta no banco.
       
      porem quando eu diminuo a tela para simular o site em um smarthphone todos os elementos ficam distorcidos...... alguem poderia me ajudar ??????? so falta isso para terminar....
       
       
      LISTA & PHP:
       
            
                      <main>
                      
                          
          <div id="listagem_produtos2">
            <?php while($linha=mysqli_fetch_assoc($resultado)) {   ?>
                          
                      <ul>
                          
                          <li><?php echo $linha["nome_produto"]?></li>
                          <li>
                              
                              <img  class="img-responsive"  height="200" width="200" src="<?php echo $linha["imagem_produto"]?>          "  >
                                   
                                   
                                      </li>
                          
                          </ul>
                      
                  <?php } ?>
                      
                      
                      
                    </div>
                      
                      </main>
                   
       
       
       
       
       
       
       
       
       
       
       
      CSS:
       
                /* estilos da listagem */
      main div#listagem_produtos2 {
          width:860px;
          margin:0 auto;
          grid-template-columns: auto;
      }
      main div#listagem_produtos2 ul {
          float:left;
          margin:5px 1px 1px;
          padding:30px;
          width:210px;
          height: 300px;
      }
      main div#listagem_produtos2 li {
          font-family: sans-serif;
          font-size: 12px;
          list-style: none;
      }
      main div#listagem_produtos2 li.imagem {
          float:left;
          margin-right: 100px;
      }
      main div#listagem_produtos2 li h3 {
          margin:10;   
      }
      main div#listagem_produtos2 li img {
          border:1px solid #ddd;   
      }
        
       
       

    • Por Lucas Vidotti dos Santos
      <div id="teste"> sssss</div>
       <!---- se eu colocar mais 's'  a div precisaria aumentar o width de acordo com os 's' que são adicionados, mas eu só consegui colocar um width fixo;
       
      #teste{
          background: grey;
          margin:auto;
          width:auto;
          height:auto;
          font-size: 60px;
          
      }
×

Informação importante

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