Jump to content
Omar~

% na borda de forma geométrica com css,

Recommended Posts

Bom eu desconheço de é possível definir uma porcentagem da borda então alguém teria como me dar uma luz para criar esse efeito.

Vejamos a print do efeito:

 

Spoiler

aaaaa.JPG.1c97015f6ce410c9a400e1f7a918b460.JPG

 

html:

Spoiler

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title> ???? </title>
        <link href="layout/stylesheet.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <main>
            <div class="container">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </main>
        <footer>
            <div class="footer-arrow"></div>
            <div class="container">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </footer>
    </body>
</html>

 

 

CSS:

Spoiler

*, *:before, *:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}

body {
    font-size: 62.5%;
    line-height: 1.5;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #222222;
}

header, main {
    background-color: #FFFFFF
}

body, footer {
    background-color: #000000
}

footer {
    color: #C8C8C8
}

.container {
    width: 100%;
    max-width: 1128px;
    margin: 0 auto;
}

.footer-arrow {
    border-left: 1280px solid #FFFFFF;
    border-bottom: 50px solid transparent;
}

 

 

 

Basicamente é isso uma curva reta semi-vertical uns 20 a 25 graus.

Mas qual o problema se eu consigo fazer?

O problema é que do jeito que fiz usei uma borda para criar o efeito e como disse até onde eu sei não dar para por uma borda por porcentagem, assim sendo não podendo adequar a um design responsivo.

Então quando a screen é abaixo do padrão da borda cria-se uma extensa barra de rolagem para suprir a falta de espaço na tela.

 

Obs.: Quero conseguir fazer isso só com CSS, porque com Javascript é só controlar a largura da borda com a largura de tela. E essa não é minha intenção.

Obrigado.

 

Share this post


Link to post
Share on other sites
6 horas atrás, Pita disse:

talvez você precise usar alguns divs, colocando um dentro do outro para simular a borda com porcentagem

https://jsfiddle.net/79kuvhz1/2/

 

É eu vim aqui para dizer que já tinha conseguido. vacilo meu mesmo não pensar em algo tão simples.

 

alí onde tem o footer-arrow é só criar um div com as seguintes propriedades:

width: 100%; Que vai pegar a largura total da tela da tela

e um overflow: hidden para remover a barra de rolagem

Pode ser feito assim:

<div style="width: 100%; overflow: hidden">
	<div class="footer-arrow"></div>
</div>

Ou criar uma class com as mesma propriedades desde que as bordas que fazem o efeito fiquem dentro desse divisor.

 

Se algum mod ver pode fechar. Resolvido

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By andre2654
      Bom dia, peço humildemente a ajuda de vocês,
      Enfim, estou fazendo um exemplo de site, só para teste mesmo, onde terá uma janela principal perguntando em qual site a pessoa quer ir(1 só empresa, porém dois negócios) ai se a pessoa clicar em alguma das melecas, quero que ela abra mostrando o site, ou só uma imagem mesmo

    • By Rasp
      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!

    • By xDenisX
      Olá pessoal, estou com uma dúvida, já pesquisei mas não encontrei nenhuma solução.
       
      Quero trocar a classe de uma div em css3 por meio de JavaScript. Por exemplo eu clico em um botão e o mesmo chama uma função em JavaScript que vai mudar a classe design1 para a classe design2 desta div.
       
      Abaixo esta o código feito. alguém poderia me ajudar ? Obrigado.
       
      <html> <head> <title></title> </head> <style type="text/css"> .design1{ background-color: blue; width: 200px; height: 200px; margin-bottom: 30px; } .design2{ background-color: yellow; width: 250px; height: 250px; margin-bottom: 30px; } </style> <script type="text/javascript"> function mudarClasse(){ document.getElementById("quadrado").style./****Não sei oque colocar aqui para mudar a classe*****/; } </script> <body> <div class="design1" id="quadrado"></div> <input type="button" name="botao" value="Mudar de classe" onclick="mudarClasse()"> </body> </html>  
    • By Mech
      Preciso fazer um textdrop em html5 e css3. Basicamento isso:
       
      > Pergunta 1
       
      Ao clicar no Pergunta 1, aparecer um texto logo em baixo assim:
       
      > Pergunta 1
         >Resposta 1
       
      Eu fiz o código, mas o texto desaparece rapidamente:
       
      HTML:
      <nav id="mainnav"> <ul class="wrapper-menu"> <li class="wrapper-dropdown"> <a>PERGUNTA</a> <ul class="dropdown"> <li>Texto Resposta</li> CSS:
      #mainnav ul{ list-style: none; } #mainnav ul li{ padding:10px 15px; background-color: whitesmoke; } .wrapper-menu{ position:relative; } .dropdown{ position:absolute; left:0; display:none; } .wrapper-dropdown:active > .dropdown{ display:block; }  
    • By evertongouveia
      Boa noite galera, estou tentando fazer com que uma página só mostre o resultado quando eu clicar em "Buscar" já tentei de várias formas e não consigo. Queria que mostrasse o resultado a partir do preenchimento do formulário. Segue abaixo o meu código:
       
      <!DOCTYPE html> <head> <title>Conveniados</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/colors/main.css" id="colors"> <script> $(document).ready(function(e) {          $("form[ajax=true]").submit(function(e) {                  e.preventDefault();                  var form_data = $(this).serialize();         var form_url = $(this).attr("action");         var form_method = $(this).attr("method").toUpperCase();                  $("#loadingimg").show();                  $.ajax({             url: form_url,              type: form_method,                   data: form_data,                  cache: false,             success: function(returnhtml){                                           $("#result").html(returnhtml);                  $("#loadingimg").hide();                                 }                    });                  });      }); </script> </head> <body> <?php     $conveniados = array();     $destaques = array();     $servicos = array();     $locais = array();     $especialidades = array();          $convs = json_decode(file_get_contents('http://url.com.br/Service/BackOffice.svc/retornaConveniado'));     foreach($convs as $conv){         $info = array();         $info["nome"] = $conv->nmConveniado;         $info["categoria"] = $conv->listaEspecialidade[0]->nmEspecialidade;         $especialidades[] = $conv->listaEspecialidade[0]->nmEspecialidade;         $info["endereco"] = $conv->listaEndereco[0]->nmLogradouro;         $info["bairro"] = $conv->listaEndereco[0]->nmBairro;         $info["cidade"] = $conv->listaEndereco[0]->nmCidade;         $info["telefone"] = $conv->dsTelefone1;         $locais[] = $conv->listaEndereco[0]->nmCidade;         $info["estado"] = $conv->listaEndereco[0]->sgEstado;         $servicos_str = '';         $k=0;         foreach($conv->listaServico as $serv_str){             $k++;             $servicos[] = $serv_str->nmServico;             if($k==count($conv->listaServico)){                 $servicos_str .= $serv_str->nmServico;             } else {                 $servicos_str .= $serv_str->nmServico.', ';             }         }         $info["servicos"] = $servicos_str;         $info["imagem"] = $conv->listaImagem[0]->nmArquivo;         $conveniados[] = $info;         if($conv->flDestaqueSite){             $destaques[] = $info;         }     }     $_especialidades = array_unique($especialidades);     $_servicos = array_unique($servicos);     $_locais = array_unique($locais);     asort($_especialidades);     asort($_servicos);     asort($_locais);     ?> <!-- Wrapper --> <div id="wrapper"> <!-- Header Container ================================================== --> <header id="header-container">     <!-- Header -->     <div id="header">         <div class="container">                          <!-- Left Side Content -->             <div class="left-side">                                  <!-- Logo -->                 <div id="logo">                     <a href="index.html"><script type="text/javascript"> //<![CDATA[ window.__mirage2 = {petok:"c15ffef9e9bc60c90529128598972fc85e861c0e-1529018942-86400"}; //]]> </script> <script type="text/javascript" src="https://ajax.cloudflare.com/cdn-cgi/scripts/04b3eb47/cloudflare-static/mirage2.min.js"></script> <img data-cfsrc="images/logo.png" alt="" style="display:none;visibility:hidden;"><noscript><img src="images/logo.png" alt=""></noscript></a>                 </div>                 <!-- Mobile Navigation -->                 <div class="mmenu-trigger">                     <button class="hamburger hamburger--collapse" type="button">                         <span class="hamburger-box">                             <span class="hamburger-inner"></span>                         </span>                     </button>                 </div>                                               </div>             <div class="right-side">                 <div class="header-widget">                     <a href="#" class="button border with-icon">Seja um conveniado <i class="sl sl-icon-plus"></i></a>                 </div>             </div>                      </div>     </div> </header> <div class="clearfix"></div> <div class="main-search-container" data-background-image="images/main-search-background-01.jpg" style="background-image: url("images/main-search-background-01.jpg");">     <div class="main-search-inner">         <div class="container">             <div class="row">                 <div class="col-md-12">                     <h2 class="text-center">Conveniados Anjo da Guarda</h2>                     <h4 class="text-center">Localize o conveniado desejado</h4> <form method="post" ajax="true" action="">                     <div class="main-search-input">                                              <div class="main-search-input-item">                             <input type="text" placeholder="Nome do conveniado" id="searchQuery" value="">                         </div>                         <div class="main-search-input-item">                             <select data-placeholder="Cidade" class="chosen-select" style="display: none;">                                 <?php foreach($_locais as $local){ ?>                     <?php if(trim($local)!=''){ ?>                     <option value="<?php echo $local; ?>"><?php echo $local; ?></option>                     <?php } ?>                 <?php } ?>                             </select>                         </div>                         <div class="main-search-input-item">                             <select data-placeholder="Categoria" class="chosen-select" style="display: none;">                                 <option>Categoria</option>                                 </select>                         </div>                                                  <div class="main-search-input-item">                             <select data-placeholder="Especialidade" class="chosen-select" style="display: none;">                                 <?php foreach($_especialidades as $especialidade){ ?>                     <?php if(trim($especialidade)!=''){ ?>                     <option value="<?php echo $especialidade; ?>"><?php echo $especialidade; ?></option>                     <?php } ?>                 <?php } ?>                             </select>                         </div>                         <div class="main-search-input-item">                             <select data-placeholder="Serviço" class="chosen-select" style="display: none;">                                 <option value>Serviços</option>                 <?php foreach($_servicos as $servico){ ?>                     <?php if(trim(servico)!=''){ ?>                     <option value="<?php echo $servico; ?>"><?php echo $servico; ?></option>                     <?php } ?>                 <?php } ?>                             </select>                         </div>                         <input type="submit" class="button" value="Buscar" />                                               </div>                     </form>                 </div>             </div>         </div>     </div> </div> <div class="container ">     <div class="row">         <div class="col-md-12 margin-top-40">             <div class="row">                 <!-- Lista -->                 <?php $d=0; ?>             <?php shuffle($destaques); ?>             <?php foreach($destaques as $destaque){ ?>                 <?php                  $d++;                  if($d<=2){                  ?> <div class="col-lg-12 col-md-12">                     <div class="listing-item-container list-layout">                         <a href="#" class="listing-item">                                                          <!-- Imagem -->                             <div class="listing-item-image">                                 <img data-cfsrc="<?php echo $destaque["imagem"]; ?>" alt="" style="display:none;visibility:hidden;"><noscript><img src="<?php echo $destaque["imagem"]; ?>" alt=""></noscript>                                 <span class="tag"><?php echo $destaque["categoria"]; ?></span>                             </div>                                                          <!-- Conteúdo -->                             <div class="listing-item-content">                                 <div class="listing-badge anunciante">Anunciante</div>                                 <div class="listing-item-inner">                                     <h3><?php echo $destaque["nome"]; ?> <i class="verified-icon"></i></h3>                                     <span><?php echo $destaque["telefone"]; ?></span></br>                                     <span><?php echo $destaque["endereco"]; ?>, <?php echo $destaque["bairro"]; ?>, <?php echo $destaque["cidade"]; ?> - <?php echo $destaque["estado"]; ?></span>                                 </div>                             </div>                         </a>                     </div>                 </div>                 <?php } ?>             <?php } ?>                 <!-- Lista / Fim -->                 <center><a href="#" class="button border with-icon margin-bottom-20">Ver mais</a></center>                 <!-- Lista -->                 <?php $d=0; ?>                                  <?php foreach($conveniados as $conveniado){ ?>                 <?php                  $d++;                  if($d<=5){                  ?>                 <div class="col-lg-12 col-md-12"                 especialidade="<?php echo $conveniado["categoria"]; ?>"                 local="<?php echo $conveniado["cidade"]; ?>"                 nome="<?php echo $conveniado["nome"]; ?>"                 servicos="<?php echo $conveniado["servicos"]; ?>">                     <div class="listing-item-container list-layout">                         <a href="#" class="listing-item">                                                          <!-- Imagem -->                             <div class="listing-item-image">                             <?php if($conveniado["imagem"] != ''){ ?>                                 <img data-cfsrc="<?php echo $conveniado["imagem"]; ?>" alt="" style="display:none;visibility:hidden;"><noscript><img src="<?php echo $conveniado["imagem"]; ?>" alt=""></noscript>                             <?php } else { ?>                                 <img data-cfsrc="images/sem-imagem.jpg" alt="" style="display:none;visibility:hidden;"><noscript><img src="images/sem-imagem.jpg" alt=""></noscript>                             <?php } ?>                                 <span class="tag"><?php echo $conveniado["categoria"]; ?></span>                             </div>                                                          <!-- Conteúdo -->                             <div class="listing-item-content">                                 <div class="listing-item-inner">                                     <h3><?php echo $conveniado["nome"]; ?></h3>                                     <span><?php echo $conveniado["telefone"]; ?></span></br>                                     <span><?php echo $conveniado["endereco"]; ?>, <?php echo $conveniado["bairro"]; ?>, <?php echo $conveniado["cidade"]; ?> - <?php echo $conveniado["estado"]; ?></span>                                 </div>                             </div>                         </a>                     </div>                 </div>                 <?php } ?>                 <?php } ?>                              </div>             <!-- Paginação -->             <div class="clearfix"></div>             <span id="result"><a href="http://wp.me/p2O9K2-b">jQuery + AJAX form submit script.</a></span>             <div class="row">                 <div class="col-md-12">                     <!-- Paginação -->                     <div class="pagination-container margin-top-20 margin-bottom-40">                         <nav class="pagination">                             <ul>                                 <li><a href="#" class="current-page">1</a></li>                                 <li><a href="#">2</a></li>                                 <li><a href="#">3</a></li>                                 <li><a href="#"><i class="sl sl-icon-arrow-right"></i></a></li>                             </ul>                         </nav>                     </div>                 </div>             </div>             <!-- Paginação / Fim -->         </div>     </div> </div> <!-- Footer ================================================== --> <div id="footer" class="margin-top-15">     <!-- Main -->     <div class="container">                  <!-- Copyright -->         <div class="row">             <div class="col-md-12">                 <div class="copyrights">© 2017 Afagu. Todos os direitos reservados.</div>             </div>         </div>     </div> </div> <!-- Footer / End --> <!-- Back To Top Button --> <div id="backtotop"><a href="#"></a></div> </div> <!-- Wrapper / End --> <!-- Scripts ================================================== --> <script data-cfasync="false" src="../../cdn-cgi/scripts/f2bf09f8/cloudflare-static/email-decode.min.js"></script><script type="text/javascript" src="scripts/jquery-2.2.0.min.js"></script> <script type="text/javascript" src="scripts/mmenu.min.js"></script> <script type="text/javascript" src="scripts/chosen.min.js"></script> <script type="text/javascript" src="scripts/slick.min.js"></script> <script type="text/javascript" src="scripts/rangeslider.min.js"></script> <script type="text/javascript" src="scripts/magnific-popup.min.js"></script> <script type="text/javascript" src="scripts/waypoints.min.js"></script> <script type="text/javascript" src="scripts/counterup.min.js"></script> <script type="text/javascript" src="scripts/jquery-ui.min.js"></script> <script type="text/javascript" src="scripts/tooltips.min.js"></script> <script type="text/javascript" src="scripts/custom.js"></script> <!-- Google Autocomplete --> <script>   function initAutocomplete() {     var input = document.getElementById('autocomplete-input');     var autocomplete = new google.maps.places.Autocomplete(input);     autocomplete.addListener('place_changed', function() {       var place = autocomplete.getPlace();       if (!place.geometry) {         window.alert("No details available for input: '" + place.name + "'");         return;       }     });     if ($('.main-search-input-item')[0]) {         setTimeout(function(){              $(".pac-container").prependTo("#autocomplete-container");         }, 300);     } } </script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAgeuuDfRlweIs7D6uo4wdIHVvJ0LonQ6g&amp;libraries=places&amp;callback=initAutocomplete"></script> </body> </html>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.