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 Pablo Macedo
      Eae, sou "novato", já tinha estudado html, mas parei por muito tempo e to voltando, mas ao fazer o primeiro site, tive problema nas imagens - banner e logo - elas não aparecem nos sites, segue anexo



       
    • Por pedro soares da silva
      Olá gostaria de saber se algum programador pode gentilmente me ajudar em uma dúvida simples.
      Tenho um slide rolando no site e as setas dele são:
       
      <li><a class="flex-next" href="#">next</a></li> <li><a class="flex-back" href="#">back</a></li>  
      Preciso adicionar via javascript uma classe e um link para que quando clicado passe a imagem e role até o topo do slide, ficando assim:
       
      <li><a class="flex-next js-smooth-scroll" href="#topo">next</a></li> <li><a class="flex-back js-smooth-scroll" href="#topo">back</a></li>  
      Agradeço.
    • Por Jovelan Sena
      E ai galera!
      Rapaz, to com um probleminha aqui, espera que vcs possam me ajudar. As imagens recebidas via upload do meu site estão ultrapassando as margens, como posso resolver isso?? To mandando foto do script e da interface.


    • Por Carlos Web Soluções Web
      Eu preciso de alguma ajuda para resolver algumas dúvidas !! Se puder me ajudar eu agradeço !!
       
      Primeiro visite o link: http://terezanininha.com.br/CSS/Animations/Pagina_1_TryIt_3.html
       
      Veja o 'Código Fonte' pelo navegador !!
       
      O que estou tentando fazer ??
       
      Eu quero que o elemento div, faça movimento de animation, vindo from {top:200px} to {top:0px} e paralisar no topo !!
       
      Neste exemplo, eu encontrei dois erros:
       
      - Primeiro Erro: Quando o div automaticamente começa a se movimentar, seu eu colocar o mouse sobre ele, antes de terminar o movimento, o div dá uma pulada
      direto para o topo !! "Eu não quero isso" !! Eu quero que se eu colocar o ponteiro do mouse sobre o div, que ele não dê esta subida repentina para o topo !!
      Que faça o movimento para o topo sem interrupção, mesmo se antes eu puser o ponteiro do mouse !!
       
      - Segundo Erro: Depois que o div cheguar ao topo, Se eu colocar o mouse nele, o fundo muda de cor, por animation ! Mas após isso, quando eu retiro o
      ponteiro do mouse, o div novamente cai para top:200px e começa o movimento para top:0px novamente !
      O que eu quero é: que o div mova somente "uma vez" and "pare" em top:0px !! Depois de parar em top:0px, que fique intacto pra sempre e apenas faça o
      movimento de mudar a cor do fundo com o passar do mouse !!
       
      I tentei procurar na internet mas não achei algo que resolvesse esses dois problemas descritos acima !
       
      Se possível, alguém poderia me dar uma ajuda testada que realmente funcione ??
       
      Agradecido
      Carlos
       
    • Por santans
      Quando envio as informações do meu formulario de cadastro para o banco de dados do wapserver     phpMyadmin, é exibida na tela de carregamento e verificação de erros a seguinte mensagem:
      ( ! ) Fatal error: Uncaught Error: Call to undefined function mysql_connect() in C:\wamp64\www\cadastro\cadastrando.php on line 11 ( ! ) Error: Call to undefined function mysql_connect() in C:\wamp64\www\cadastro\cadastrando.php on line 11 Call Stack # Time Memory Function Location 1 0.0016 407112 {main}( ) ...\cadastrando.php:0  
      Já verifiquei a linha do código escrito não encontrei erro, mas como sou iniciante acho que posso ter errado, os dados inseridos no formulário e no código juntamente com o endereço correspondem com os do banco de dados.
       
      Aqui esta uma copia do código do FORMULÁRIO:
      <html> <head> <title>sistema de cadastro</title> </head> <body> <form name="signup" method="post" action="cadastrando.php"> Nome:<input type="text" name="nome" /> <br/> <br/> Sobrenome:<input type="text" name="sobrenome" /> <br/> <br/> Estado:<input type="text" name="estado"/> <br/> <br/> Cidade:<input type="text" name="cidade"/> <br/> <br/> CEP:<input type="text" name="cep"/> <br/> <br/> Endereço:<input type="text" name="endereco"/> <br/> <br/> Nº:<input type="text" name="numero"/> <br/> <br/> E-mail:<input type="text" name="e-mail"/> <br/> <br/> Senha:<input type="password" name="senha"/> <br/> <br/> <input type="submit" value="cadastrar"/> </form> </body> </html> A copia do codigo do script de envio de dados ao servidor do myphpadmin:
      <html> <head> <title>cadastrando...</title> </head> <body> <?php $host = "localhost"; $user = "root"; $pass = "6768"; $banco = "cadastro"; $conexao = mysql_connect($host, $user, $pass) or die(mysql_error()); mysql_select_db($banco) or die(mysql_error()); ?> <?php $nome=$_POST['nome']; $sobrenome=$_POST['sobrenome']; $estado=$_POST['estado']; $cidade=$_POST['cidade']; $cep=$_POST['cep']; $endereco=$_POST['endereco']; $numero=$_POST['numero']; $email=$_POST['email']; $senha=$_POST['senha']; $sql = mysql_query("INSERT INTO usuarios(nome, sobrenome, estado, cidade, cep, endereco, numero, email, senha) VALUES('$nome', '$sobrenome', '$estado', '$cidade', '$cep', '$endereco', '$numero', '$email', '$senha')"); ?> </body> </html> Abaixo tem um anexo com um print nomes dos parâmetros  que foram definidos no phpmysql na tabela usuarios...
       
      Por favor fique a vontade para mostrar exemplos e dizer o que esta errado.
       
      Nota que não sei desenvolver muito bem ainda, todo o exemplo é bem vindo.
×

Informação importante

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