Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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!
@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!
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.