Как сделать прозрачную стрелу?

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 достигнуты с помощью border и не могут иметь фоновые изображения.

• Сделать .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 Fiddle:http://jsfiddle.net/2pjxfs4n/2/

Answer 2

Вы можете сделать это по-другому. Прежде всего, вам не нужно это правило

border-color: rgba (136, 183, 213, 0);

как он ничего не меняет.

Inspite использование прозрачной опции для вашей границы текущей стоимости приграничного-топ-цвета в RGBA и использовать альфа как этого Шанель

границы верхнего цвета: RGBA (42,42,42,0.4);

надеюсь, что это будет работать для вас

Answer 3

Не уверен, что это то, что вы want.had установить некоторые width и height к main:after и был повернут так, что он выглядит как стрела Modified 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