0

I am trying to create a CSS HTML mask as like image. Down arrow will be transparent display top image in arrow.

Thank in advance.

.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;
}
<div class="div1"></div>
<div class="div2">
    <div class="arrow">
        <div class="down"></div>
    </div>
</div>
Mansukh Khandhar
  • 2,542
  • 1
  • 19
  • 29
  • could you please clarify? it's difficult to know what your hopeful result is at the moment. – wahwahwah Jun 18 '15 at 05:54
  • Sorry i can't understand. witch type of result ? – Mansukh Khandhar Jun 18 '15 at 05:55
  • please explain what is `.arrow`? what do you want `.arrow` to be doing? – wahwahwah Jun 18 '15 at 06:02
  • in this link after display black arrow it will be display transplant http://www.mediacake.net/cake123/isanook-dev/new-home/ as like this link http://stackoverflow.com/questions/28154643/crop-a-triangle-from-image-and-place-it-below-the-original-image-css – Mansukh Khandhar Jun 18 '15 at 06:04
  • Solution here: http://stackoverflow.com/questions/23758922/transparent-arrow-triangle . Best way in my opinion is just photoshop! – freewheeler Jun 18 '15 at 06:12
  • the mediacake link is protected... the SO link gives you the information you need to complete the task. you're asking how to do this with 2 separate images... that's a different question :) – wahwahwah Jun 18 '15 at 06:14
  • @freewheeler thanks for suggest. But in this situation image come dynamic in slider. – Mansukh Khandhar Jun 18 '15 at 06:27

0 Answers0