Speech bubble background for arrow as well

Question

Hi I have done a speech bubble but I want to get the background image to come into the arrow as well. I did find some examples as well but editing them to fit my needs is confusing because I cant position the arrow to the place I want it to be in the end.

.bubble {
    position: relative;
    width: 227px;
    height: 310px;
    background-color:white !important;
    background: url(../images/thepartypeople/assets/main-bg.png) repeat 0 0;
}
.bubble:after {
    content: "";
    position: absolute;
    top: 128px;
    left: -15px;
    border-style: solid;
    border-width: 15px 15px 15px 0;
    border-color: transparent #000;
    display: block;
    width: 0;
    z-index: 1;

}

This is my code that I have for my speech bubble.

Any help would be appriciated

Thanks alot.

the image would be useful to answer this – benni_mac_b Jun 11 '13 at 13:41 — benni_mac_b, Jun 11 '13 at 13:41

score 1 · Accepted Answer · edited May 23 '17 at 11:50

Here is the question answered elsewhere

Creating a transparent arrow above image in CSS3

But, I'll give you the HTML and CSS for your specific answer. I changed your HTML a little bit by the way.

<div class="bubble">
    <img class="test" src="http://placekitten.com/241/310" alt="kitten" />
</div>

You can keep it with just the div .bubble and have background: url('http://placekitten.com/241/310'); but the image would have to be exactly the height and width of the div.

.bubble {
    position:relative;
    width:241px;
    height: 310px;
}
.bubble:before, .bubble:after {
    content:'';
    position:absolute;
    width:0;
    border-left:15px solid white;
    left:0;
}
.bubble:before {
    top:0;
    height:128px;
    border-bottom:15px solid transparent;
}
.bubble:after {
    top:143px; 
    bottom:0;
    border-top:15px solid transparent; 
}
.test {
    display:block;
    width:100%;
}

Here is a fiddle http://jsfiddle.net/WUXQd/2/ the fiddle has comments in it explaining a bit how it works.

EDIT: By the way this creates a mask around the image and two reverse triangles to make it look like there is a transparent triangle.

score 0 · Answer 2 · 2013-06-11T14:07:19.943

0

is this similar to what you wanted?

.bubble {
   position: relative;
   width: 250px;
   height: 120px;
   padding: 0px;
   background: #FFFFFF;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   background: url(border.jpg) repeat 0 0;
}

.bubble:after {
    content: "";
    position: absolute;
    top: 45px;
    left: -15px;
    border-style: solid;
    border-width: 15px 15px 15px 0;
    border-color: transparent #FFFFFF;
    display: block;
    width: 0;
    z-index: 1;
    border-image: url(border.jpg);
}

EDIT: This link can help you: http://www.sitepoint.com/pure-css3-speech-bubbles/

edited Jun 11 '13 at 14:07

answered Jun 11 '13 at 13:19

Thanks for the reply. I checked that link earlier I did a google search before I posted here because I could not understand how exactly to do it. I tried the border image that you had mentioned in your post. That brought me a step closer but that did not accomplish what I needed either. It displays the arrow in a weird way. (the background is dots and they are pretty tiny where several would cover a small space/the arrow. and border image displays just 4 dots stretched. I tried changing the values but it didnt help much) :( – Adrian Jun 12 '13 at 01:48
Yeah tried few other approaches, apparently it works for gradient backgrounds but not images. – Jun 12 '13 at 04:18

Speech bubble background for arrow as well

2 Answers2