Question

带有图案的html标签的背景，带有底部透明箭头的块也带有图案。如何使箭头透明，以便在下面看到背景块？

当浏览器窗口改变宽度时，块的背景移动。

截图： http://s48.radikal.ru/i119/1407/b5/02578fecc1ff.gif

P.S 即可。带箭头的div将与

中的其他块一起使用

抱歉我的英语不好

Answer 1

如果你使用Cal（）只能在9及以上工作，这将是我的解决方案。创建两个梯形，而不是掩盖三角形。

http://jsfiddle.net/JrfyN/

HTML

<div id="top">
    <div id="arrow">
    <div class="trapezoid left"></div>
    <div class="trapezoid right"></div>
</div>
</div>

<div id="bottom"></div>

CSS

#top{
    width:100%;
    height:100px;
    background:lightgrey;
    position:relative;
}
#arrow {
    position:absolute;
    bottom:0;
    width:100%;
    height:50px;
    background:rgba(0,0,0,0);
}
#bottom {
    width:100%;
    height:500px;
    background:grey;
}
.trapezoid {
    width: calc(50% - 50px); 
    border-bottom: 50px solid grey;
    height: 0;
    display:block;
}
.left {float:left; border-right: 50px solid transparent;}
.right {float:right; border-left: 50px solid transparent;}

Answer 2

如果是纯色，您可以使用线性渐变作为遮罩：

CSS，例如箭头高度为50px。的 DEMO

background: linear-gradient(to right,white,white) no-repeat bottom right, linear-gradient(to right,white,white) no-repeat bottom left, linear-gradient( 225deg, transparent 60.2%, white 60%) bottom center no-repeat , linear-gradient( -225deg, transparent 60.2%, white 60%) bottom center no-repeat , linear-gradient(to left,purple,lime)/* last is your pattern */; background-size:45% 50px, 45% 50px, 200px 50px, 200px 50px, 100% 100%; ;

您可以向元素添加最小箭头高度的padding-bottom，以避免在该箭头区域上看到内容。

这里不需要额外的标记或伪元素来绘制它。

DEMO with a background repeated image

您可以使用额外标记重叠两个不同的纹理： DEMO

DIV与背景图案＆amp;透明的底部箭头。如何？

2 个答案: