Css 左/右透明切口箭头

我知道之前已经回答了这个问题，但是这是针对div的底部，我无法解决如何处理div的左侧和右侧

我试图达到与此相同的效果：

正文{
背景：url(http://farm6.staticflickr.com/5506/9699081016_ba090f1238_h.jpg)0-100px；
}
#包装纸{
溢出：隐藏；
高度：116px；
}
#试验{
高度：100px；
背景色：#ccc；
位置：相对位置；
}
#测试：之前{
内容：“；
位置：绝对位置；
左-6px；
宽度：50%；
高度：16px；
顶部：100px；
背景色：#ccc；
-webkit变换：倾斜（-40度）；
-moz变换：倾斜（-40度）；
-o变换：倾斜（-40度）；
-ms变换：倾斜（-40度）；
变换：倾斜（-40度）；
}
#测试：之后{
内容：“；
位置：绝对位置；
右图：-6px；
宽度：50%；
高度：16px；
顶部：100px；
背景色：#ccc；
-webkit变换：倾斜（40度）；
-moz变换：倾斜（40度）；
-o变换：倾斜（40度）；
-ms变换：倾斜（40度）；
变换：倾斜（40度）；
}

---

此解决方案根据以下答案改编：

重点是使用两个倾斜的伪元素来创建透明的剪切箭头。两个伪元素都是绝对定位和倾斜的

在下面的演示中，箭头位于左侧。要在右侧进行相同操作，可以复制

.arrow

元素，并在第二个元素上使用

scaleX（-1）

+定位。这将允许您同时更改两侧，并减少CSS。或者，可以基于第一个图元创建一个新元素，并更改“定位”和“倾斜”属性

.wrap{
位置：相对位置；
溢出：隐藏；
宽度：70%；
保证金：0自动；
}
.包裹img{
宽度：100%；
高度：自动；
显示：块；
}
.阿罗{
位置：绝对位置；
左：0；上：0；
宽度：3%；
身高：100%；
背景色：rgba（255255.8）；
}
.arrow:之前.arrow:之后{
内容：''；
位置：绝对位置；
左：100%；
宽度：100%；
身高：50%；
背景色：继承；
}
.阿罗：以前{
底部：50%；
-ms变换原点：0.100%；
-webkit转换来源：0 100%；
变换原点：0.100%；
-ms变换：歪斜（-45度）；
-webkit变换：歪斜（-45度）；
变换：歪斜（-45度）；
}
.阿罗：之后{
最高：50%；
-ms变换原点：0；
-webkit转换原点：0；
变换原点：0；
-ms变换：歪斜（45度）；
-webkit变换：歪斜（45度）；
变换：歪斜（45度）；
}

---

嘿，我刚刚修改了你现有的一个。也许可以做得更干净一点，但你明白了。这是左边。从这里换到右边很容易

HTML

<div id="wrapper">
<div id="test"><div id="fill"></div>
<div id="fill2"></div></div>
</div>

---

您可以使用CSS3的

剪辑路径

属性，但它有点太小了。然而，如果你不需要支持IE，那么下面有很多有用的例子

div{背景：黄色；宽度：400px；高度：300px；}
部门经理{
-webkit剪辑路径：多边形（10%0%、90%0%、90%100%、90%40%、100%50%、90%60%、90%100%、10%100%、10%60%、0%50%、10%40%）；
剪辑路径：多边形（10%0%、90%0%、90%100%、90%40%、100%50%、90%60%、90%100%、10%100%、10%60%、0%50%、10%40%）；
}

---

可以使用单个元素，使用插入的

框阴影和伪元素
:before
和
:before

元素倾斜45度和-45度以形成透明间隙。插入框阴影用于增加箭头横幅的宽度



正文{
字体大小：10px；
}
div{
背景：url（'https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg');
身高：33.3em；
宽度：50em；
位置：相对位置；
溢出：隐藏；
框阴影：插入2em 0 0 rgba（255、255、255、0.6）；
}
div:before，div:after{
内容：“；
位置：绝对位置；
左：2米；
背景色：rgba（255、255、255、0.6）；
高度：25公分；
宽度：2米；
-webkit转换源：0%0%；
-moz变换原点：0%0%；
-ms变换原点：0%0%；
变换原点：0%0%；
}
部门：以前{
底部：-8.35em；
-webkit变换：歪斜（45度）；
-moz变换：歪斜（45度）；
-ms变换：歪斜（45度）；
变换：歪斜（45度）；
}
部门：之后{
顶部：-8.35em；
-webkit变换：歪斜（-45度）；
-moz变换：歪斜（-45度）；
-ms变换：歪斜（-45度）；
变换：歪斜（-45度）；
}
感谢您的全面回答！我会尝试这个，如果我能让它工作，将标记为回答！工作出色！非常感谢。
BODY{
background: url(http://farm6.staticflickr.com/5506/9699081016_ba090f1238_h.jpg) 0 -100px;}

#wrapper {
overflow: hidden;
height: 116px;}

#fill{
height: 40px;
position:absolute;
width:30px;
left:-30px;
background: #ccc;}

#fill2{
height: 40px;
position:absolute;
width:30px;
background: #ccc;
bottom:0;
left:-30px;}

#test {
height: 116px;
width: 692px;
background-color: #ccc;
position: relative;
float:right;}

#test:before {
content:"";
position: absolute;
top: 40px;
height: 50%;
width: 30px;
left: 0;
background-color: #ccc;
-webkit-transform: skew(40deg);
-moz-transform: skew(40deg);
-o-transform: skew(40deg);
-ms-transform: skew(40deg);
transform: skew(40deg);}

#test:after {
content:"";
position: absolute;
bottom: 40px;
height: 50%;
width: 30px;
left: 0;
background-color: #ccc;
-webkit-transform: skew(-40deg);
-moz-transform: skew(-40deg);
-o-transform: skew(-40deg);
-ms-transform: skew(-40deg);
transform: skew(-40deg);}