Круг Div шар

Question

Вот мой текущий CSS для изображения круга 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;
}

И вывод div, как показано ниже:

Как я могу граничить с div и стать таким?

Скажем, изображение внутри div:

Answer 1

Вы можете использовать псевдоэлемент для создания своего речевого пузырькового треугольника, как показано в демонстрации ниже.

Это работает с помощью skew на квадрат, и поместите его absolute в пределах relative хорошо расположенный контейнерный элемент.

Кроме того, это может быть достигнуто с помощью одного элемента, если вы смогли использовать background-image вместо тега изображения.

.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://stackru.com/images/128ed9535682e2d0f80836388977e71cf5e93118.png" />
</div>

для получения дополнительной информации при создании треугольника вы можете найти это весьма полезную демонстрацию того, как достичь этого треугольника.

---

Изображение на заднем плане

Вместо этого, используя background-image, вы можете сделать это только с одним элементом.

.circ {
  position: relative;
  height: 100px;
  width: 100px;
  border-radius: 50%;  
  border: 5px solid tomato;
  background:url(https://stackru.com/images/128ed9535682e2d0f80836388977e71cf5e93118.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>

Answer 2

Если вы ищете стрелку, это то, что вам нужно добавить.

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

.circle-image{
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-image: url("https://stackru.com/images/128ed9535682e2d0f80836388977e71cf5e93118.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);
}