Circle div balloon

Question

Here is my current css for image circle baloon

.circle-image{
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-size: contain;
    background-position: center;
    background-image: url("/assets/img/dashboard/img-stdn.png");
    display: block;
}

And the div output as below:

enter image description here

How I can border the div and become like this?

enter image description here

Let say the image inside the div :

enter image description here

What exactly do you want? I see a border on both yours and your example. Do you want the "arrow" that sticks out on the right? — MortenMoulder, May 29 '15 at 07:05
You can, as you know the size of the circle, use the border-image property: https://developer.mozilla.org/en-US/docs/Web/CSS/border-image — MortenMoulder, May 29 '15 at 07:07
you want pink border on your circle or what?little bit confusing questiong..sorry — Leo the lion, May 29 '15 at 07:07
I just want the circle div like balloon...yes like my expected output (pink border) — Nere, May 29 '15 at 07:10
I know to do that, the question is how to put an arrow ...at the border? — Nere, May 29 '15 at 07:14
You guys don't get what he wants. Neither did I. Look at the middle picture. It has a border and on the right, it has a pointer/arrow kinda thing. It's like "this guy says ->". — MortenMoulder, May 29 '15 at 07:14
Alternatively, you can put the image inside the img-tag (``) and then but a background on the image. The background image should be the border and balloon, which you will create in GIMP, Photoshop, etc. — MortenMoulder, May 29 '15 at 07:19
This post shows several approaches to make the arrow you are looking for : [Speech bubble with arrow](http://stackoverflow.com/questions/30299093/speech-bubble-with-arrow) — web-tiki, May 29 '15 at 07:36

score 6 · Accepted Answer · edited Jun 20 '20 at 09:12

You could use a pseudo element in order to create your speech bubble triangle, as shown in the demo below.

This works by using a skew on a square, and position it absolutely within a relatively positioned container element.

Alternatively, this could be achieved with a single element if you were able to use the background-image instead of an image tag.

.circ {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  bordeR: 5px solid tomato;
  position: relative;
}
.circ img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 50%;
}
.circ:before{
  content:"";
  position:absolute;
  top:10%;
  right:0;
  height:20px;
  width:20px;
  background:tomato;
  transform:skewX(55deg) skewY(10deg);
  }

<div class="circ">
  <img src="https://i.stack.imgur.com/lCp2t.png" />
</div>

for more info in generating the triangle, you may find this quite a useful demonstration of how to achieve this triangle.

Background-image

By using a background-image instead, you can make this with only a single element.

.circ {
  position: relative;
  height: 100px;
  width: 100px;
  border-radius: 50%;  
  border: 5px solid tomato;
  background:url(https://i.stack.imgur.com/lCp2t.png);
  background-size:100% 100%;
}
.circ:before{
  content:"";
  position:absolute;
  top:10%;
  right:0;
  height:20px;
  width:20px;
  background:tomato;
  transform:skewX(55deg) skewY(10deg);
  z-index:-1;
  }

<div class="circ"></div>

score 2 · Answer 2 · answered May 29 '15 at 07:19

If you're looking for the arrow, this is what you need to add.

http://jsfiddle.net/c3Love5c/1/

.circle-image{
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-image: url("https://i.stack.imgur.com/lCp2t.png");
    display: block;
    border:3px solid purple;
    position:relative;
}

.circle-image:before{
    content:'';
    display:block;
    border:10px solid transparent;
    border-top-color:purple;
    position:absolute;
    right:-5px;
    top:5px;
    transform:rotate(15deg);
    -moz-transform:rotate(15deg);
    -webkit-transform:rotate(15deg);
    -ms-transform:rotate(15deg);
    -o-transform:rotate(15deg);
}

Circle div balloon

2 Answers2

Background-image