html – 圈子div气球_html-js-css

概述这是我目前的图像圈气球css .circle-image{ width: 64px; height: 64px; border-radius: 50%; background-size: contain; background-position: center; background-image: url("/assets/img/dashboard 这是我目前的图像圈气球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里面的图像：

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

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

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

.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 >  <img src="http://i.stack.imgur.com/lCp2t.png" /></div>

有关生成三角形的更多信息,您可能会发现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;  }