html - Css Skew 创建一个相框

Question

我正在尝试使用 CSS 在每一侧倾斜一个 div 以模仿相框 Angular ，但我不知道如何分别倾斜每一端并保留背景图像。

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