如何制作透明箭头？

Question

我有这个问题,我无法弄清楚如何使箭头透明.

所以基本上我只是用:after做一个border与这些值来做出一个箭头.但我想要的是使箭头透明,这样你就可以看到背景图像,这是header标签中的背景图像.

CSS:

html,body {
    width:100%;
    height:auto;
    font-family:'open-sans', sans-serif;
}
header {width:100%;}
main {
    width:100%;
    min-height:50vh;
    position:relative;
}
main:after {
    top:0;
    left:50%;
    border:solid transparent; 
    content:""; 
    height:0; 
    width:0; 
    position:absolute; 
    border-color: rgba(0, 0, 0, 0); 
    border-top-color:#2a2a2a; 
    border-width:60px; 
    margin-left: -60px;
}

HTML:

    <header class="bg__header">
    </header>
    <main>
        <article></article>
    </main>

小提琴

这里是我想要实现的一个很好的例子:

Answer 1

这可以完成,但需要一些额外的伪元素.您需要稍微颠倒逻辑并使箭头"剪切"背景,因为CSS箭头是使用borders 实现的,并且不能有背景图像.

• 请.bg__header position: relative;确保伪元素定位相对它.
• 添加.bg__header:before和.bg__header:after,这些将提供透明箭头左右两侧的白色边框.
• 修改main:after使箭头透明,侧面白色.

你的小提琴中有相当多的代码,所以为了简单起见,这些是变化:

.bg__header {
    position: relative;
}
.bg__header:before {
    content:"";
    background-color: white;
    height: 60px;
    position: absolute;
    bottom: 0;
    width: 50%;
    left: -60px;
}
.bg__header:after {
    content:"";
    background-color: white;
    height: 60px;
    position: absolute;
    bottom: 0;
    width: 50%;
    right: -60px;
}
main:after {
    border-color: white;
    border-top-color: transparent;
    top: -60px;
}

JS小提琴: http ://jsfiddle.net/2pjxfs4n/2/