Css倾斜创建一个相框

Question

我试图在每一侧使用一个div来模仿相框角度，我无法弄清楚如何分别歪斜每一端并保留背景图像。

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

使用skew

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