如何制作透明箭头？ [复制]

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>

Fiddle

这里有一个我想要实现的黄金示例：

Answer 1

这可以做到，但需要一些额外的伪元素。你需要稍微颠倒一下你的逻辑，让箭头“切掉”背景，因为 CSS 箭头是使用 borders 实现的，并且不能有背景图片。

• 使.bg__headerposition: 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/

Answer 2

你可以用另一种方式做到这一点。首先，你不需要这条规则

边框颜色：rgba(136, 183, 213, 0);

因为它没有改变任何东西。

尽管在 rgba 中对边框顶部颜色的边框当前值使用透明选项，并像这样使用 alpha chanel

border-top-color:rgba(42,42,42,0.4);

希望这对你有用

Answer 3

不确定这是您想要的。已将一些 width 和 height 设置为 main:after 并旋转了它，使其看起来像一个箭头 修改main:after这样

main:after {
    /*ARROW on header tag*/
    top:-50px;
    left:50%;
    height:60px;
    width:60px;
    content:"";
    position:absolute;
    margin-left: -60px;

    -webkit-transform:rotate(45deg);
    border-bottom:solid 1px black;
     border-right:solid 1px black;
}

CODE