Left/right 透明镂空箭头

Question

我知道之前已经回答过这个问题，但是那是针对 div 的底部，我不知道如何针对 div 的左侧和右侧进行回答。

我正在尝试实现与此相同的效果：

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

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

但在左侧有切口，另一个在右侧有切口。

Answer 1

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

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

在下面的demo中，箭头在左边。要在右边做同样的事情，您可以复制 .arrow 元素并在第二个元素上使用 scaleX(-1) + 定位。这将允许您同时更改两侧并且具有更少的CSS。或者您可以在第一个元素的基础上制作一个新元素并更改定位和倾斜属性。

DEMO

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

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

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

DEMO

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

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

Answer 2

嘿，我刚刚修改了您现有的。可能可以做得更干净一点，但你明白了。这是左侧。从这里向右交换很容易。

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

Answer 3

您可以使用 CSS3 的 clip-path 属性但有点 bleeding-edge. However, if you don't need to support IE there are plenty of useful examples at 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

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

元素倾斜 45deg 和 -45deg 以创建透明间隙。 inset box-shadow 用于增加箭头横幅的宽度。

Fiddle (1 element)

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

<div></div>

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

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

Fiddle (2 elements)

注：

以前使用的想法 post here。
所有测量都是在 em 中完成的，字体大小设置为 10px。

Left/right 透明镂空箭头

Left/right transparent cut out arrow

css

svg

css-shapes