Css Skew 创建相框答案

【问题标题】：Css Skew to create a picture frameCss Skew 创建相框
【发布时间】：2015-09-01 06:18:20
【问题描述】：

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

【问题讨论】：

你能给我们举个例子吗？
jsfiddle.net/vkpsja8r
这个jfiddle中的代码给你一个粗略的想法，基本上我的问题还在于角度也越过div区域。

【解决方案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;
}

【讨论】：

【解决方案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);
}

【讨论】：