Css Incliner pour créer un cadre

Question

J'essaie d'incliner un div de chaque côté pour imiter un angle de cadre d'image en utilisant CSS, je ne peux pas comprendre comment biaiser chaque extrémité séparément et conserver une image de fond.

Answer 1

Mise à jour Ajouter deux autres div qui sera un tour

<div class="container"> 
     <div class="topFrame"> </div> 
     <div class="leftFrame"></div> 
     <div class="imgContainer">IMG GOES HERE</div> 
     <div class="rightFrame"></div> 
     <div class="botFrame"></div> 
     <div class="leftTriangle"></div> <!--New Div left lower triangle--> 
     <div class="rightTriangle"></div> <!--New Div right lower triangle--> 
</div> 

Ne pas utiliser biais pour topframe et bottomFrame

.botFrame:after { 
    display:block; 
    content: ' '; 
    background: #444; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 
.topFrame:after { 
    display:block; 
    content: ' '; 
    background: #888; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

d'abord mis overflow-hidden pour conteneur et effectuer ces modifications

.container{ 
    overflow: hidden; 
} 

.leftFrame{ 
    background: #888; 
} 
.leftFrame:after { 
    transform: skew(0deg, 45deg); 
} 
.leftTriangle{ 
    position: absolute; 
    bottom: 0; 
    width: 0; 
    height: 0; 
    border-style: solid; 
    border-width: 50px 50px 0 0; 
    border-color: #131213 transparent transparent transparent; 
} 
.rightTriangle{ 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    width: 0; 
    height: 0; 
    border-style: solid; 
    border-width: 0 50px 50px 0; 
    border-color: transparent #222222 transparent transparent; 
} 

Answer 2

S'il vous plaît Check Out JSFiddle

utilisateur ci-dessous CSS pour créer skew:

.menu-item{ 
    transform: skew(20deg, 0deg); 
    -ms-transform: skew(20deg, 0deg); 
    -webkit-transform: skew(20deg, 0deg); 
    display:inline-block; 
    padding: 10px; 
    background-color:#1a0000; 
    color:white; 
} 

.inner{ 
    transform: skew(-20deg, 0deg); 
    -ms-transform: skew(-20deg, 0deg); 
    -webkit-transform: skew(-20deg, 0deg); 
}