html - 圆形 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 中的图像:

Answer 1

您可以使用伪元素来创建您的语音气泡三 Angular 形，如下面的演示所示。

这通过在正方形上使用倾斜，并将其绝对定位在相对定位的容器元素中来实现。

或者，如果您能够使用 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>

有关生成三 Angular 形的更多信息，您可以找到 this关于如何实现这个三 Angular 形的非常有用的演示。

---

背景图片

通过使用背景图像，您可以仅使用一个元素来实现。

.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>