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 BryanSamuel
      Eu preciso somar a coluna SOMA onde a coluna A e a coluna B(ao outro registro, por exemplo A do registro 1 e A do registro 2 forem iguais) forem iguais, após isso dividir por 3 e em seguida inserir em outra tabela.
    • Por JrPaulino
      Então...
      Estou com algumas duvidas sobre php, é possível estilizar o php com css? onde for um link colocar um botão, mudar cores, fontes e etc? deixar apresentável :D
       
      Vou deixar o código completo e depois tentar explicar minha duvida.
       
      <?php session_start(); include_once("conexao.php"); ?> <!DOCTYPE html> <html> <head> <title>CRUD - Listar</title> <meta charset="utf-8"> </head> <body> <a href="index.php">Cadastrar</a><br> <a href="listar.php">Listar</a><br> <h1>Listar</h1> <?php if(isset($_SESSION['msg'])){ echo $_SESSION['msg']; unset($_SESSION['msg']); } //receber o numero da pagina $pagina_atual = filter_input(INPUT_GET, 'pagina', FILTER_SANITIZE_NUMBER_INT); $pagina = (!empty ($pagina_atual)) ? $pagina_atual : 1; //setar itens por pagina $qnt_result_pg = 3; //calcular inicio de visualizaçao $inicio = ($qnt_result_pg * $pagina) - $qnt_result_pg; $result_usuarios = "SELECT * FROM usuarios LIMIT $inicio, $qnt_result_pg"; $resultado_usuarios = mysqli_query($conn, $result_usuarios); while($row_usuario = mysqli_fetch_assoc($resultado_usuarios)){ echo "ID: " . $row_usuario['id'] . "<br>"; echo "Nome: " . $row_usuario['nome'] . "<br>"; echo "E-Mail: " . $row_usuario['email'] . "<br>"; echo "Data de criação: " . $row_usuario['created'] . "<br><br>"; echo "<a href='edit_usuario.php?id=" . $row_usuario['id'] . "'>Editar</a><br><hr>"; } // paginação contar usuarios $result_pg = "SELECT COUNT(id) AS num_result FROM usuarios"; $resultado_pg = mysqli_query($conn, $result_pg); $row_pg = mysqli_fetch_assoc($resultado_pg); // echo $row_pg['num_result']; //quantidade de paginas $quantidade_pg = ceil ($row_pg['num_result'] / $qnt_result_pg); //limitar antes e depois $max_links = 2; echo "<a href='listar.php?pagina=1'>Primeira</a>"; for ($pag_ant = $pagina - $max_links; $pag_ant <= $pagina - 1; $pag_ant ++){ if($pag_ant >= 1){ echo "<a href='listar.php?pagina=$pag_ant'>$pag_ant</a>"; } } echo "$pagina"; for ($pag_dep = $pagina + 1; $pag_dep <= $pagina + $max_links; $pag_dep ++){ if($pag_dep <= $quantidade_pg){ echo "<a href='listar.php?pagina=$pag_dep'>$pag_dep</a>"; } } echo "<a href='listar.php?pagina=$quantidade_pg'>Ultima</a>"; ?> </body> </html> Vi diversas video aulas sobre php e em uma das aulas o professor explica como criar uma pagina para listar os usuários cadastrados, uma das duvidas é nessa parte
      Queria criar um botão para não ficar apenas um hiperlink :( , já tentei class, div e não tenho ideia de como fazer isso funcionar 
       
      Valeu :)
    • Por Mech
      Eu tenho uma duvida em relação ao header ou footer.
       
      Assim como em todos os sites, o header ou footer é o mesmo independente da pagina, no caso, a forma mais simples seria dar ctrl+c e ctrl+v e criar pagina. Mas caso eu fosse alterar o conteúdo dela, eu precisaria trocar de pagina em pagina. Teria alguma solução, um framework ou alguma forma de só alterar em uma pagina e alterar em todas paginas?
    • Por ronneyvideres
      Olá pessoal, sou novo no fórum e gostaria da ajuda de vocês!
       
      Creio que pra vocês vai parecer super simples, mas para mim eu já tentei, mechi, procurei e não encontrei.
       
      Seguinte:
       
       
      O endereço do meu site da rádio é: www.byavrillavigne.com.br/webradio
       
      Abaixo segue em anexo um print com o nome circulado do que eu quero mudar...
       
       

    • Por unknn
      Meu footer da com uma margin de 20px em baixo. E tbm tem uma barra de rolagem em baixo.
      Desde que eu aumentei o height do footer, ele ta com essa margin. Ja a barra de rolagem ta la faz mt tempo, não sei com ela apareceu.
      Alguem pode me ajudar?
      PS: estou usando sistema de grid no layout. E o site é estático.
      <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css -->     body {       padding: 0;       margin: 0;       font-family: 'Roboto', sans-serif;       background-color: #f1f1f1;     }     #main {       display: -ms-grid;       display: grid;       grid-template-areas: "header header" "nav nav" "content aside" "footer footer" "privacidade privacidade";     }     .mainHeader {       -ms-grid-row: 1;       -ms-grid-column: 1;       -ms-grid-column-span: 2;       grid-area: header;       background: #1A1A1A;       height: 100px;     }     .logo {       margin: 12px 10px 10px 98px;     }     .mainNav {       -ms-grid-row: 2;       -ms-grid-column: 1;       -ms-grid-column-span: 2;       grid-area: nav;       background: #333333;       margin-top: -19px;       height: 23px;     }     .mainContent {       -ms-grid-row: 3;       -ms-grid-column: 1;       grid-area: content;       background: #FFFFFF;       margin-left: 200px;       margin-right: 200px;       width: 550px;       margin-bottom: -570px;       margin-top: 22px;       height: 1100px;       box-shadow: -3px 3px 6px #e1e1e1;     }     .mainAside {       -ms-grid-row: 3;       -ms-grid-column: 2;       grid-area: aside;       background: #FFFFFF;       margin-right: 200px;       margin-left: -200px;       width: 407px;       margin-bottom: -570px;       margin-top: 22px;       height: 1100px;       box-shadow: 3px 3px 6px #e1e1e1;     }     .mainFooter {       -ms-grid-row: 4;       -ms-grid-column: 1;       -ms-grid-column-span: 2;       grid-area: footer;       background: #1A1A1A;       height: 19px;     }     .footer {       color: #FFFFFF;       text-align: center;       font-size: 15px;       font-weight: 300;     }     .mainFooter {       height: 150px;       margin-top: 520px;     } <!-- language: lang-html -->     <html>     <body>       <section>         <footer class="mainFooter footer privacidadeall">           <h5 class="copry">© 2018 - BizarroNEWS</h5>           <h5><a href="privacidade.html" class="privacidade">Política de privacidade</a></h5>           <h4>Siga-nos</h4>           <div class="socialLinkMargin">             <a href="http://fb.me/BizarroNEWS11"><img src="img/facebook.png" class="socialFooterLink" alt="Perfil no facebook" title="Perfil no facebook"></a>             <a href="https://twitter.com/BizarroNEWS11"><img src="img/twitter.png" class="socialFooterLink" alt="Perfil no twitter" title="Perfil no twitter"></a>             <a href="https://www.instagram.com/bizarronews11/"><img src="img/instagram.png" class="socialFooterLink" alt="Perfil no instagram" title="Perfil no instagram"></a>             <a href="https://plus.google.com/u/1/103620500697888608929"><img src="img/google+.png" class="socialFooterLink" alt="Perfil no google+" title="Perfil no google+"></a>           </div>         </footer>       </section>     </body>     </html> <!-- end snippet -->  
×

Informação importante

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