圆形div气球

Question

这是我目前用于图像圆形气球的CSS样式：

.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 内有以下图片：

- Nere

---

你可以，由于你已经知道了圆的大小，使用border-image属性：https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image - MortenMoulder

你尝试过使用 border-color: pink; 吗？ - serv-inc

你们不明白他想要什么。我也不明白。看看中间的图片。它有一个边框，右侧有一个指针/箭头之类的东西。就像“这个人说->”。 - MortenMoulder

或者，您可以将图像放在img标签内（<img src="your-image.png" />），然后在图像上放置背景。背景图像应该是边框和气球，您可以使用GIMP、Photoshop等软件创建。 - MortenMoulder

本帖展示了制作您正在寻找的箭头的几种方法：带箭头的漫画对话框。 - web-tiki

Answer 1

你可以使用伪元素来创建你的对话气泡三角形，如下面的演示所示。

这是通过在一个正方形上使用倾斜（skew）的方式，并将其绝对定位于相对定位的容器元素内部来实现的。

另外，如果你能够使用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="http://i.stack.imgur.com/lCp2t.png" />
</div>

如果想要了解如何生成三角形，您可以在这里找到一个非常有用的演示。

---

背景图像

使用背景图像可以只用一个元素来实现此效果。

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

- jbutler483

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("http://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);
}

- gopalraju