左/右透明切出箭头

Question

我知道之前已经回答了这个问题，但是对于div的底部而言，我无法解决如何在div的左侧和右侧进行操作。

我试图获得与此相同的效果：

＆＃13;

＆＃13;

BODY {
  background: url(http://farm6.staticflickr.com/5506/9699081016_ba090f1238_h.jpg) 0 -100px;
}
#wrapper {
  overflow: hidden;
  height: 116px;
}
#test {
  height: 100px;
  background-color: #ccc;
  position: relative;
}
#test:before {
  content: "";
  position: absolute;
  left: -6px;
  width: 50%;
  height: 16px;
  top: 100px;
  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;
  right: -6px;
  width: 50%;
  height: 16px;
  top: 100px;
  background-color: #ccc;
  -webkit-transform: skew(40deg);
  -moz-transform: skew(40deg);
  -o-transform: skew(40deg);
  -ms-transform: skew(40deg);
  transform: skew(40deg);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但是左侧的裁员和右侧的裁员。

Answer 1

此解决方案改编自此答案：Transparent arrow/triangle

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

在以下演示中，箭头位于左侧。要在右侧进行相同操作，您可以复制.arrow元素并在第二个元素上使用scaleX(-1) +定位。这样您就可以同时更改双方并减少 CSS 。或者，您可以根据第一个元素创建一个新元素，并更改定位和倾斜属性。

<强> DEMO

＆＃13;

＆＃13;

.wrap {
  position: relative;
  overflow: hidden;
  width: 70%;
  margin: 0 auto;
}
.wrap img {
  width: 100%;
  height: auto;
  display: block;
}
.arrow {
  position: absolute;
  left: 0; top:0;
  width: 3%;
  height:100%;
  background-color: rgba(255,255,255,.8);
}
.arrow:before, .arrow:after {
  content:'';
  position: absolute;
  left: 100%;
  width: 100%;
  height:50%;
  background-color: inherit;
}
.arrow:before {
  bottom: 50%;
  -ms-transform-origin: 0 100%;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -ms-transform: skewY(-45deg);
  -webkit-transform: skewY(-45deg);
  transform: skewY(-45deg);
}
.arrow:after {
  top: 50%;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -ms-transform: skewY(45deg);
  -webkit-transform: skewY(45deg);
  transform: skewY(45deg);
}

＆＃13;

<div class="wrap">
    <img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" />
    <div class="arrow"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

---

对于相同的输出，您可以使用svg：

<强> DEMO

＆＃13;

＆＃13;

.wrap {
  position: relative;
  overflow: hidden;
  width: 70%;
  margin: 0 auto;
}
.wrap img {
  width: 100%;
  height: auto;
  display: block;
}
.arrow{
  position:absolute;
  left:0; top:0;
  height:100%;
}

＆＃13;

<div class="wrap">
  <img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" />
  <svg class="arrow" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 10 100">
    <path d="M-1 -1 H10 V45 L5 50 L10 55 V101 H-1z" fill="#fff" fill-opacity="0.8" stroke-width="0"/>
  </svg>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

可以使用插入box-shadow和伪元素:before和:after

使用单个元素制作

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

<强> Fiddle (1 element)

＆＃13;

＆＃13;

body {
  font-size: 10px;
}
div {
  background: url('https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg');
  height: 33.3em;
  width: 50em;
  position: relative;
  overflow: hidden;
  box-shadow: inset 2em 0 0 0 rgba(255, 255, 255, 0.6);
}
div:before, div:after {
  content: "";
  position: absolute;
  left: 2em;
  background-color: rgba(255, 255, 255, 0.6);
  height: 25em;
  width: 2em;
  -webkit-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
div:before {
  bottom: -8.35em;
  -webkit-transform: skewY(45deg);
  -moz-transform: skewY(45deg);
  -ms-transform: skewY(45deg);
  transform: skewY(45deg);
}
div:after {
  top: -8.35em;
  -webkit-transform: skewY(-45deg);
  -moz-transform: skewY(-45deg);
  -ms-transform: skewY(-45deg);
  transform: skewY(-45deg);
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

错误：使用veiwport单位时，box-shadow的浏览器呈现并不一致。在缩小到33％时，GC显示1px间隙b / w伪元素和盒阴影。缩放时px和em单位不会出现此错误。

---

比上面给出的更好的方法是在img元素之上使用一个元素。其余的属性（overflow: hidden;，box-shadow）也会被使用，但即使在缩放时也没有箭头之间的差距。

<强> Fiddle (2 elements)

---

注意：

• 早期帖子here中使用的提示。
• 所有测量均在em中完成，设置字体大小为10px。

Answer 3

您可以使用CSS3的clip-path属性，但它有点bleeding-edge。但是，如果您不需要支持IE，http://css-tricks.com/clipping-masking-css/

上有很多有用的示例

div {background: yellow; width:400px; height:300px;}
div img {
    -webkit-clip-path: polygon(10% 0%, 90% 0%, 90% 100%, 90% 40%, 100% 50%, 90% 60%, 90% 100%, 10% 100%, 10% 60%, 0% 50%, 10% 40%);  
    clip-path: polygon(10% 0%, 90% 0%, 90% 100%, 90% 40%, 100% 50%, 90% 60%, 90% 100%, 10% 100%, 10% 60%, 0% 50%, 10% 40%);
}

<div><img src="http://lorempixel.com/400/300/nature/" /></div>

Answer 4

嘿，我刚修改了你现有的那个。可能本来可以做得更清洁，但你明白了。这是左侧。很容易将它从右边换到它。

JSFiddle

HTML

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

CSS

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