在CSS中創建自定義圖形？

Question

是否有可能以某種方式在CSS中創建以下內容？ （參見附圖）

我想要實現的是能夠改變的CSS的氣泡的背景色。

一種解決方案是將背景氣泡保存在一堆不同的顏色中，並根據所選的顏色顯示正確的背景圖像。然而，這不會像我所希望的那樣充滿活力。

這裏的任何想法？

Answer 1

這裏就是我所做的：不完全一樣的泡沫，但similiar，快來看看吧

小提琴：http://jsfiddle.net/zD3bV/1/

CSS

#speech-bubble { 
    width: 120px; 
    height: 80px; 
    background: purple; 
    top: 2px; 
    position: absolute; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
} 
#speech-bubble:before { 
    content:""; 
    position: absolute; 
    width: 0; 
    height: 0; 
    border-top: 13px solid transparent; 
    border-right: 26px solid purple; 
    border-bottom: 13px solid transparent; 
    margin: 13px 0 0 -25px; 
} 
#talk-bubble { 
    width:120px; 
    height:80px; 
    background:blue; 
    position:relative; 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
    border-radius:10px; 
    } 
    #talk-bubble:before { 
     content:""; 
     position:absolute; 
     right:100%; 
     top:26px; 
     width:0; 
     height:0; 
     border-top:13px solid transparent; 
     border-right:26px solid blue; 
     border-bottom:13px solid transparent; 
    } 

此外，搜索對CSS的形狀，你會更有可能得到最好的結果，然後你可以根據你的需要修改它們

Answer 2

Somethi像這樣的使用僞元素在CSS技巧中完成。我能想到或預見的唯一限制是圍繞對象的邊界... CSS Round-out borders

使用：after和：before僞元素我能夠採用相同的概念並將其應用於創建形狀。再次......唯一的結果就是邊界。另外...它需要它背後的背景是堅實的，以便你可以模仿背景顏色......這裏沒有圖案或透明度。嘗試更改：after和之前的元素的顏色，然後您將看到它的完成情況。

JSFiddle Example

<div class="bubble"> 
    <span>Some Text</span> 
</div> 

body { background: #999;} 

.bubble { 
    position: relative; 
    width: 150px; 
    height: 60px; 
    border-radius: 10px 10px 0 10px; 
    border: 1px solid #fff; 
    background: #444; 
} 

.bubble:before { 
    content: " "; 
    position: absolute; 
    width: 30px; 
    height: 30px; 
    bottom: 0; 
    right: -30px; 
    background: #444; 
} 

.bubble:after { 
    content: " "; 
    position: absolute; 
    width: 60px; 
    height: 60px; 
    bottom: 0; 
    right: -60px; 
    background: #999; 
    border-radius: 100%; 
} 

Answer 3

其他選項是不錯的CSS方法，但對這樣的形狀邊界將不可能只用CSS。

在我的方法中，我將使用svg圖像。

這是圖像中的路徑，正如您可以看到類和ID可用於svg圖像。

<path class="bubBg" fill="#7C7C7C" 

這是一個JSFIDDLE你可以玩弄。

（目前我相信這是有確切設計，但邁克爾的回答是不錯的最佳選擇）