Css倾斜创建一个相框

Question

我试图在每一侧倾斜一个div来模仿使用CSS的画框角度，我不知道如何分别倾斜每一端并保留背景图像

Answer 1

已更新再添加两个div，这将是一个技巧

 <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>

不要对topFrame和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%;
} 

首先将容器的overflow设置为hidden，并进行以下更改

.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

请查看 JSFiddle

用户在CSS下面创建歪斜:

.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);
}