我知道之前已经回答了这个问题,但是对于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>
&#13;
但是左侧的裁员和右侧的裁员。
答案 0 :(得分:4)
此解决方案改编自此答案: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);
}
&#13;
<div class="wrap">
<img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" />
<div class="arrow"></div>
</div>
&#13;
对于相同的输出,您可以使用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%;
}
&#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;
答案 1 :(得分:4)
可以使用插入box-shadow
和伪元素:before
和:after
元素由 45deg 和 -45deg 倾斜以创建透明间隙。插入框阴影用于增加箭头横幅的宽度。
<强> 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);
}
&#13;
<div></div>
&#13;
错误:使用veiwport单位时,box-shadow
的浏览器呈现并不一致。在缩小到33%时,GC显示1px间隙b / w伪元素和盒阴影。缩放时px
和em
单位不会出现此错误。
比上面给出的更好的方法是在img
元素之上使用一个元素。其余的属性(overflow: hidden;
,box-shadow
)也会被使用,但即使在缩放时也没有箭头之间的差距。
<强> Fiddle (2 elements) 强>
注意:
em
中完成,设置字体大小为10px。答案 2 :(得分: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>
答案 3 :(得分:2)
嘿,我刚修改了你现有的那个。可能本来可以做得更清洁,但你明白了。这是左侧。很容易将它从右边换到它。
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);}