4內部

Question

我需要幫助創造一些像上面無論是在CSS/jQuery的/ SVG /帆布

每個三角形將包含一個圖像三角與圖像框需要裁剪以適應三角形的圖像，並且所有內容都需要進行響應。

我管理通過CSS邊框做到這一點，但令我驚訝的是我無法將圖像添加到它。

任何種類的提示或信息的是極大的讚賞。

例導致通過CSS：

<div class="middle_section" style="height: 900px;"> 
    <div class="one_forth triangleMask for_1"></div> 
    <div class="one_forth triangleMask for_2"></div> 
    <div class="one_forth triangleMask for_3"></div> 
    <div class="one_forth triangleMask for_4"></div> 
</div> 

.middle_section .for_3, 
    .middle_section .for_1{ 
     width: 100%; 
     height: 50%; 
     overflow: hidden; 
    } 

    .middle_section .for_2, 
    .middle_section .for_4{ 
     width: 50%; 
     height: 100%; 
     overflow: hidden; 
    } 

    .middle_section .for_1:after { 
     width: 0; 
     height: 0; 
     border-style: solid; 
     border-width: 440px 808px 0px 808px; 
     border-color: #ff0000 transparent transparent transparent; 
     content: ''; 
     position: absolute; 
     top:0; 
     left:10px; 
    } 

    .middle_section .for_2:after { 
     width: 0; 
     height: 0; 
     border-top: 440px solid transparent; 
     border-bottom: 440px solid transparent; 
     border-left: 808px solid lime; 
     content: ''; 
     position: absolute; 
     top:10px; 
    } 

    .middle_section .for_3:after { 
     width: 0; 
     height: 0; 
     border-left: 808px solid transparent; 
     border-right: 808px solid transparent; 
     border-bottom: 440px solid #4679BD; 
     content: ''; 
     position: absolute; 
     bottom:0; 
     left:10px; 
    } 

    .middle_section .for_4:after { 
     width: 0; 
     height: 0; 
     border-top: 440px solid transparent; 
     border-bottom: 440px solid transparent; 
     border-right: 808px solid pink; 
     content: ''; 
     position: absolute; 
     top:10px; 
     right:0; 
    } 

Answer 1

我與CSS的例子變換旋轉：

.wrapper { 
 
    width:284px; 
 
    height:281px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.top { 
 
    transform: rotate(45deg); 
 
    position: absolute; 
 
    top:-100px; 
 
    left: 40px; 
 
} 
 

 
.bottom { 
 
    transform: rotate(45deg); 
 
    position: absolute; 
 
    bottom: -105px; 
 
    left: 40px; 
 
} 
 

 
.left { 
 
    transform: rotate(45deg); 
 
    position: absolute; 
 
    left: -102px; 
 
    top: 41px; 
 
} 
 

 
.right { 
 
    transform: rotate(45deg); 
 
    position: absolute; 
 
    right: -98px; 
 
    top: 41px; 
 
}

<div class="wrapper"> 
 

 
    <div class="top"> 
 
    <img src="http://lorempixel.com/200/200/sports/1"/> 
 
    </div> 
 
    
 
    <div class="bottom"> 
 
    <img src="http://lorempixel.com/200/200/sports/2"/> 
 
    </div> 
 
    
 
    <div class="left"> 
 
    <img src="http://lorempixel.com/200/200/sports/3"/> 
 
    </div> 
 
    
 
    <div class="right"> 
 
    <img src="http://lorempixel.com/200/200/sports/5"/> 
 
    </div> 
 
    
 
</div>