圈DIV氣球

Question

這裏是我的成像圈氣球

.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輸出低於目前的CSS：

我怎樣才能邊境div和變成這個樣子？

咱們說的格圖像內：

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>

在產生三角更多的信息，你可能會發現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; 
 
    }

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