3D変換で折紙効果を達成するには

Question

私はdivに折紙効果を作ろうとしています。私は私がこのようにdiv要素を変換するにはどうすればよい私は

何を意味するかを確認するためにpapperシートの2枚の写真をアップロードするのだろうか？同じ折り紙の効果を持たせたい

Answer 1

高さ、幅、罫線を囲んで遊んで、目的の寸法に変更します。

body { 
 
    padding: 150px 150px; 
 
} 
 

 
/* Horizontal part of the ribbon */ 
 
.fribbon { 
 
    padding: 0 25px; 
 
    height: 60px; 
 
    background: #e7e7e7;  
 
    position: relative; 
 
    float: left; 
 
    clear: left; 
 
    } 
 

 
/* Vertical part of the ribbon */ 
 
.fribbon:after { 
 
    content: "";  
 
    display: block; 
 
    width: 40px; 
 
    height: 0px; 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0px; 
 
    z-index: 20; 
 
    border-bottom: 60px solid #e7e7e7; 
 
    border-right: 60px solid transparent; 
 
    
 
    /* Brwoser-specific rules */ 
 
    -webkit-transform: rotate(90deg); 
 
    -webkit-transform-origin: right bottom; 
 
    -moz-transform: rotate(90deg); 
 
    -moz-transform-origin: right bottom; 
 
    -o-transform: rotate(90deg); 
 
    -o-transform-origin: right bottom; 
 
    -ms-transform: rotate(90deg); 
 
    -ms-transform-origin: right bottom; 
 
    transform: rotate(90deg); 
 
    transform-origin: right bottom; 
 
    } 
 

 
/* Shadow part of the ribbon */  
 
    .fribbon:before { 
 
    content: "";  
 
    display: block; 
 
    width: 20px; 
 
    height: 0px; 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0px; 
 
    z-index: 10; 
 
    border-bottom: 60px solid rgba(0, 0, 0, 0.3); 
 
    border-right: 60px solid transparent; 
 
     
 
    /* Brwoser-specific rules */ 
 
    -webkit-transform: rotate(80deg); 
 
    -webkit-transform-origin: right bottom; 
 
    -moz-transform: rotate(80deg); 
 
    -moz-transform-origin: right bottom; 
 
    -o-transform: rotate(80deg); 
 
    -o-transform-origin: right bottom; 
 
    -ms-transform: rotate(80deg); 
 
    -ms-transform-origin: right bottom; 
 
    transform: rotate(80deg); 
 
    transform-origin: right bottom; 
 
    }

<div class="fribbon"></div>