html 绘制气球,html – 圈子div气球

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

这通过在正方形上使用倾斜来工作,并将其绝对定位在相对定位的容器元素内.

或者,如果您能够使用背景图像而不是图像标记,则可以使用单个元素实现.

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

}

有关生成三角形的更多信息,您可能会发现this非常有用的演示如何实现此三角形.

背景图片

通过使用背景图像,您可以只使用一个元素.

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

}