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

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

transparent arrow

Answer 1

这可以完成，但需要一些额外的伪元素。您需要稍微颠倒逻辑，并使用border s使CSS箭头“切出”背景，并且不能有背景图像。

设置.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/

Answer 2

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

border-color：rgba（136,183,213,0）;

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

尽管在rgba中使用了border-top-color的边框当前值的透明选项，并使用像这样的alpha chanel

边框顶色：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

如何制作透明箭头？

3 个答案: