CSS

Efeito Canto Dobrado

Publicado por antlou em 11/10/2017

Este efeito pode ser bem útil para aplicar numa div.
Vou então mostrar como criar um efeito de canto dobrado com CSS.
Criá-lo é muito simples.

Podemos dar o nosso toque especial, substituindo a cor do fundo por um fundo de textura.
Dentro podemos também adicionar uma imagem.

Resultado:

Exemplo 1:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum.

Exemplo 2 :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum

Este efeito funciona em qualquer browser actual - Internet Explorer, Firefox, Safari, Opera...

canto_dobrado.html



<!--
********************************************
* Canto dobrado numa div                                      
* Author:antlou                            
* Version:1.0                              
* Date:11/10/2017                          
********************************************
-->

<style type="text/css">
.canto {
        /* cor de fundo */
    background: none repeat scroll 0 0 #EBEBFF;     
    color: #0000FF;     /* cor do texto */
    margin: 2em auto;
    overflow: hidden;
    padding: 3em 1.5em;
    position: relative;
    width: 480px;     /* largura */
    font-size: 16px;     /* tamanho da font */
}
.canto:before {
    -moz-box-shadow: 
    0 1px 1px rgba(0, 0, 0, 0.3), 
    -1px 1px 1px rgba(0, 0, 0, 0.2);
    /* cor do canto */
    background: none repeat scroll 0 0 #3B3BFF;
     /* cor da borda */
    border-color: #FFFFFF #FFFFFF #3B3BFF #3B3BFF;     
    border-style: solid;
     /* tamanho do canto */
    border-width: 0 25px 25px 0;    
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
}
            
.canto.fundo {
    background: 
    url(img/fundo.jpg) repeat scroll 0 0 #3A7F2A;  
    color: black;     /* color de texto */
    text-shadow: 1px 1px 1px #000;
    margin: 2em auto;
    overflow: hidden;
    padding: 1em 1.5em;
    position: relative;
    width: 480px;     /* largura */
}

.canto.fundo:before {
    -moz-box-shadow: 
        0 1px 1px rgba(0, 0, 0, 0.3),
        -1px 1px 1px rgba(0, 0, 0, 0.2);
    /* cor do canto */
    background: none repeat scroll 0 0 #B1B1FF;
     /* cor de borda */
    border-color: #FFFFFF #FFFFFF #B1B1FF #B1B1FF; 
    border-style: solid;
    /* tamanho do canto */
    border-width: 0 36px 36px 0;    
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
}
</style>
            
<div class="canto"> 
    Exemplo 1:
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Duis vel sem magna. 
    Proin pulvinar velit eleifend ligula ultrices vestibulum.
</div>

<div class="canto fundo">        
    <img src="img/webdesigner.jpg" align="left">
    Exemplo 2 :
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Duis vel sem magna. 
    Proin pulvinar velit eleifend ligula ultrices vestibulum. 
</div>

voltar para o topo ↑

Download Código

Espero ter sido útil. Deixe avaliação ao script.

1 votos - 5 pontos - 30 downloads
Média : 5,000

Infoscript - Desenvolvimento de websites, e-commerce e programação

Infoscript tem soluções para desenvolvimento web e programação para aproximar os seus clientes às necessidades atuais do mercado.
O design de produto, a criação de websites e lojas online entre outros, são os principais serviços que temos para lhe oferecer.
Contate-nos através do endereço geral@infoscript.pt
Nós teremos uma solução para si à medida.