箭头作为掩码在html css透明与bg图像

Question

我正在尝试像图像一样创建CSS HTML掩码。向下箭头将是透明的箭头顶部图像。

提前感谢。

＆＃13;

＆＃13;

.div1, .div2 {
    height: 200px;   
    position: relative;
}
.div1 {
    background-image: url("//www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg");
    background-position: center center;
    background-size: cover;
}
.div2 {
    background-image: url("//images.visitcanberra.com.au/images/canberra_hero_image.jpg");
    background-position: center center;
    background-size: cover;
}
.arrow {
    position: relative;
}
.arrow > div:after, .arrow > div:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.arrow .down:after {
    border-color: rgba(136, 183, 213, 0);
    border-top-color: #000;
    border-width: 20px;
    margin-left: -20px;
}

＆＃13;

<div class="div1"></div>
<div class="div2">
    <div class="arrow">
        <div class="down"></div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;