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 teuzero
      esse é o link do meu site:https://xraros.000webhostapp.com/
       
      o problema é que no arquivo css test.css no bloco de código:
      eu escrevi esse código:
       
      @media screen and (min-width: 800px) and (max-width: 848px){ .busca { width:200px; } .barra { background:url(../img/barra.png)no-repeat; } } escrevi esse código:
      .barra { background:url(../img/barra.png)no-repeat; }  
      no index da pagina tem a div:
      <div class="barra"> </div>  
      mais no site não carrega essa imagem.
      como eu carrego essa imagem via css dentro de um div?
    • By DinhoPHP
      estou há horas tentando utilizar o Carousel do Bootstrap para exibir produtos. Fiz sozinho não funcionou, então encontrei este código https://codepen.io/kreigd/pen/ybYNoN coloquei em um arquivo sozinho, separado do site que estou desenvolvendo e nem assim funciona. Fica assim: http://equipenovainfo.com.br/_portifolio/amanda/31_07_2019/carousel_prod.php
       
      Segue o código:
      <!doctype html> <html lang="pt-br"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Hello, world!</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script> $(document).ready(function() { $("#myCarousel").on("slide.bs.carousel", function(e) { var $e = $(e.relatedTarget); var idx = $e.index(); var itemsPerSlide = 3; var totalItems = $(".carousel-item").length; if (idx >= totalItems - (itemsPerSlide - 1)) { var it = itemsPerSlide - (totalItems - idx); for (var i = 0; i < it; i++) { // append slides to end if (e.direction == "left") { $(".carousel-item") .eq(i) .appendTo(".carousel-inner"); } else { $(".carousel-item") .eq(0) .appendTo($(this).find(".carousel-inner")); } } } }); }); </script> </head> <body> <div class="container-fluid"> <h1 class="text-center mb-3">Bootstrap Multi-Card Carousel</h1> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <div class="carousel-inner row w-100 mx-auto"> <div class="carousel-item col-md-4 active"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/f44242/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 1</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/418cf4/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 2</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/3ed846/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 3</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/42ebf4/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 4</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/f49b41/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 5</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/f4f141/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 6</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> <div class="carousel-item col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="http://placehold.it/800x600/8e41f4/fff" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card 7</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> </div> <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> Preciso terminar esse trabalho, travei nisso. Me ajudará à pagar a faculdade e ganharei tempo para estudar. 
    • By Webster Moitinho
      Criei um sistema de mensagens em que a notificação aparece como um "bullet" com a quantidade de mensagens não lidas sobre a logomarca do sistema. Todavia eu gostaria de que, se a quantidade de mensagens fosse maior que 0 (zero), o sistema emitisse um alarme sonoro.
       
      Meu código está assim:
       
      <?php //verifica se o numero de linhas é maior que 0 (zero) $num_rows = 2; if($num_rows > 0){ //toca o som de alerta echo "<script> play();</script>"; // <-- O elemento audio só vai ser criado daqui algumas linhas, // não tem como ele ser tocado ainda. } ?> <audio id="autoplay"> <source src="libraries/gopi.mp3" type="audio/mp3" /> seu navegador não suporta HTML5 </audio> <script type="text/javascript"> audio = document.getElementById('autoplay'); function play(){ audio.play(); } </script>  
    • 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!

×

Important Information

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