左/右透明切出箭头答案

【问题标题】：Left/right transparent cut out arrow左/右透明切出箭头
【发布时间】：2016-10-10 22:58:00
【问题描述】：

我知道之前已经回答了这个问题，但是这是针对 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>

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

【问题讨论】：

标签： css svg css-shapes

【解决方案1】：

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

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

在以下演示中，箭头位于左侧。要在右侧进行相同的操作，您可以复制 .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>

【讨论】：

感谢您的全面回答！我会试试这个，如果我能让它工作，我会标记为已回答！
工作出色！谢谢

【解决方案2】：

可以使用插入 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);
}

&lt;div&gt;&lt;/div&gt;

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

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

Fiddle (2 elements)

注意：

从之前的帖子here 中使用的想法。
所有测量均在 em 中完成，字体大小设置为 10 像素。

【讨论】：

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

&lt;div&gt;&lt;img src="http://lorempixel.com/400/300/nature/" /&gt;&lt;/div&gt;

【讨论】：

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

【讨论】：