小编Mor*_*ard的帖子

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

所以基本上我只是用: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>

小提琴

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