CSS bubble div Inverted Triangle image overlay - html

Question

I have one question with inverted triagle image overlay. I have created this DEMO from codepen.io.
What i want in my demo you can see there is a bubble div inside an image. a triangle on the right side of the image looks.I would like it to appear in the triangle in the picture. How can i do this anyone can help me ?
CSS:
.bubble
{
position: fixed;
width: 345px;
height: 235px;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: #d8dbdf solid 1px;
-webkit-box-shadow: -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
-moz-box-shadow: -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
box-shadow: -1px 1px 1px 0px rgba(216, 219, 223, 0.52);
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 10px 0 10px 10px;
border-color: transparent #fff;
display: block;
width: 0;
z-index: 1;
right: -10px;
top: 16px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 10px 0 10px 10px;
border-color: transparent #d8dbdf;
display: block;
width: 0;
z-index: 0;
right: -11px;
top: 16px;
}
.film_bilgileri{
float:left;
width:345px;
height:235px;
background-color:red;
}
.film_kapak{
float:left;
width:345px;
height:120px;
background-color:white;
overflow:hidden;
}
.film_kapak img {
width:100%;
-webkit-transition: -webkit-transform 0.5s ease;
-moz-transition: -moz-transform 0.5s ease;
-webkit-backface-visibility: hidden;
}
HTML:
<div class="container">
<div class="bubble">
<div class="film_bilgileri">
<div class="film_kapak">
<img src="abc.jpg">
</div>
</div>
</div>
</div>

Answer 1

One way is to create a transparent triangle using white borders, and masking above and below using an element with white background.
transparent triangle using white masking is created by:
border-left: 11px solid transparent;
border-top: 11px solid white;
border-bottom: 11px solid white;
working example: http://jsfiddle.net/064ojpm8/
(note - it's not production material, but merely to give you the idea)

Answer 2

If you want your triangle point towards your image, you can use the code from Sgoldy in your :after pseudo-element:
.bubble:after {
content: '';
position: absolute;
width: 0;
border-right: 11px solid white;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
z-index: 1;
right: 0px;
top: 36px;
}
I just moved the element to the left with right: 0px; and altered the border values.
You don't need the :before
DEMO