Search code examples
htmlcssbackground-image

Compound image background CSS showing continuity

I want to show a message text bubble with an image in background, while having a bottom-right arrow that shows continuity. You will see in the image below that the arrow doesn't continue the image from the bubble. It is important to mention that the bottom right arrow is made out of a clipping mask with the same background. How is it possible to make the image of the bottom arrow have sense of continuity with the background image of the bubble?

enter image description here

You can see below the HTML used, as well as the CSS involved for each one.

div {
      display: block;
    }
    .container {
      position: relative;
    }
    .first {
      background-image: url("https://i.imgur.com/fNsIPdT.png");
      width: 100%;
      height: 100%;
      background-size: 100% 100%;
      display: block;
    }

    .first.container.boxBubble {
      width: 250px;
      height: 140px;
      margin-top: 50px;
      padding: 20px;
      margin-left: 110px;
      border-radius: 15px;
      background-image:url("https://i.imgur.com/xH6YWZ3.jpg");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      text-align: center;
      position: relative;
      display: inline-block;
    }

    .tri-right-im.btm-left-in-im:after{
      content: ' ';
      position: absolute;
      width: 50px;
      height: 50px;
      left: 180px;
      right: auto;
      top: auto;
      bottom: -30px;
      -webkit-clip-path: polygon(0 0, 91% 0, 100% 100%);
      clip-path: polygon(0 0, 91% 0, 100% 100%);
      background-image:url("https://i.imgur.com/xH6YWZ3.jpg");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 50% 50%;
    }

    .talk-bubble {
      margin: 40px;
      display: inline-block;
      position: relative;
      width: 200px;
      height: auto;
      background-color: lightyellow;
    }
    
    .round{
      border-radius: 20px;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;

    }
<html>
<body>
<div class="container first">
  <div class="first container boxBubble tri-right-im btm-left-in-im"></div>
  <div class="talk-bubble tri-right round btm-left-in"></div>
</div>
</body>
</html>

Solution

  • HTML:

    <html>
  <body>
    <div class="container">
      <div id="clip"></div>
      <div id="boxBubble"></div>      
    </div>
  </body>
</html>

    CSS:

    * {
  box-sizing: border-box;
}
body {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}
div {
  display: block;
  position: relative;
}
.container {
  background: url("https://image.ibb.co/dwo8rS/1.png") no-repeat center center;
  background-size: 100% auto;
  height: 100%;
  padding: 50px;
  width: 100%;
}
#clip {
  background:url("https://image.ibb.co/eJbWd7/IMG_20170611_WA0025.jpg") no-repeat top center;
  background-size: 100% auto;
  clip-path: polygon(0 20%, 20% 0, 80% 0, 100% 20%, 100% 60%, 80% 80%, 80% 100%, 60% 80%, 20% 80%, 0 60%, 0 20%);
  width: 250px;
  height: 200px;
  margin: auto;
  z-index: 5;
}
#boxBubble {
  background:url("https://image.ibb.co/eJbWd7/IMG_20170611_WA0025.jpg") no-repeat top center;
  background-size: 100% auto;
  border-radius: 20px;  
  width: 250px;
  height: 160px;
  padding: 0;
  margin: -200px auto 0;
  z-index: 9;
}

    This is one way you could do it. I hope this helps you! https://jsfiddle.net/keganv/3j5c4gg0/116/