什麼是最好的技術，這一形象

Question

我有這個圖片的代碼：

我想這個形象代碼 - 使用HTML和CSS3（只了吧，不是背景的背景可以改變）。它必須在高度和寬度上可擴展。什麼是最好的技術來做到這一點？謝謝。

Answer 1

OK，你可以試試這個（在Firefox 11只測試）...

HTML

<div class="bubble"> 
    <div class="content"> 
     Some content can go inside this bubble... 
    </div> 
    <div class="arrow"><div class="arrow-shadow"></div></div> 
</div> 

CSS

.bubble 
{ 
    background:#D0D0D0; 
    background-image: -ms-linear-gradient(top, #BBB 0%, #EEE 100%); 
    background-image: -moz-linear-gradient(top, #BBB 0%, #EEE 100%); 
    background-image: -o-linear-gradient(top, #BBB 0%, #EEE 100%); 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #BBB), color-stop(1, #EEE)); 
    background-image: -webkit-linear-gradient(top, #BBB 0%, #EEE 100%); 
    background-image: linear-gradient(top, #BBB 0%, #EEE 100%); 
    border-radius:10px; 
    border-top:2px solid #EEE; 
    border-bottom:2px solid #AAA; 
    position:relative; 
    width:380px; 
    height:100px; 
} 
.bubble .content 
{ 
    padding:10px; 
} 

/* Arrow */ 
.bubble .arrow { 
    position:absolute; 
    top:50%; 
    left:100%; 
    margin-top:-12px; 
} 
.bubble .arrow:after, 
.arrow .arrow-shadow 
{ 
    border:10px solid Transparent; 
    border-color:rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0); 
    content:' ';  
    height:0; 
    position:absolute; 
    width:0; 
} 
.bubble .arrow:after 
{ 
    border-left-color:#D3D3D3; 
} 
.arrow .arrow-shadow 
{ 
    height:3px; 
    border-left-color:#AAA; 
} 

這是在我看來，一個黑客位的，但它似乎與你想要的相當接近。唯一可能出現的問題是：

1. 向後兼容性。老版本的IE可能會窒息，因此值得測試它並根據需要篡改IE兼容性。
2. 如果箱子變得太大，箭頭可能與箱子看起來顏色不同。我找不到解決這個問題的方法，所以你可能會有更好的結果把箭頭放在一個靜態位置。

你可以在這裏找到的jsfiddle：http://jsfiddle.net/eWj6q/13/

Answer 2

我可能不會推薦它的最好的技術，但不知何故，將更好地工作：

使用線性漸變：線性漸變是一個比在一條直線上兩點之間的距離之間的色彩逐漸過渡。最簡單的方法是，線條漸變將沿着整條線條的兩種顏色成比例變化。

div { 
background: -moz-linear-gradient(#FFF, #000); 
background: -ms-linear-gradient(#FFF, #000); 
background: -o-linear-gradient(#FFF, #000); 
background: -webkit-linear-gradient(#FFF, #000); 
} 

Answer 3

這是最接近我可以使用div的。

大概可以通過使用畫布獲得更好的箭頭，但它會需要JavaScript。 Javascript也可以解決箭頭狀框的背景顏色問題。 :)

演示：http://jsfiddle.net/Xvm2C/

截圖：http://i.stack.imgur.com/iwlMj.png

HTML部分：

<div class="nice"> 
<div class="arrow-container"> 
</div> 
Hello world! 
</div> 

CSS部分：

body {padding:50px; background-color: #ccc;} 
.nice { 
    background-color: white; 
    position: relative; 
    min-height:65px; 
    padding:10px 10px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    background: -moz-linear-gradient(top, #cccccc 0%, #ffffff 100%); /* firefox */ 

    box-shadow: 0 0px 0px #fff, 0 0px 1px #666, inset -1px -1px 0px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8); 

    -moz-box-shadow: 0 0 0 #FFFFFF, 0 0 1px #666666, -1px -1px 0 rgba(0, 0, 0, 0.5) inset, 0 1px 1px rgba(255, 255, 255, 0.8) inset; 

    -webkit-box-shadow: 0 0px 0px #fff, 0 0px 1px #666, inset -1px -1px 0px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8);  

    text-shadow: 0 1px 2px #fff; 

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(100%,#ffffff)); 
    font-size:20px 
} 



.arrow-container { 
    background-color: white; 
    height: 26px; 

    position: absolute; 
    right: 0; 
    top: 50%; 
    margin-top:-13px; 
    margin-right:-19px; 
    width: 20px; 

    background: -moz-linear-gradient(top, #dcdcdc 0%, #ededed 100%); /* firefox */ 

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dcdcdc), color-stop(100%,#ededed)); 

    box-shadow: 0 0px 0px #fff, 1px 0px 1px #666, inset 0px -1px 0px rgba(0,0,0,0.5), inset -1px 1px 1px rgba(255,255,255,0.8); 

    -moz-box-shadow: 0 0 0 #FFFFFF, 1px 0 1px #666666, 0px -1px 0 rgba(0, 0, 0, 0.5) inset, -1px 1px 1px rgba(255, 255, 255, 0.8) inset; 

    -webkit-box-shadow: 0 0px 0px #fff, 1px 0px 1px #666, inset 0px -1px 0px rgba(0,0,0,0.5), inset -1px 1px 1px rgba(255,255,255,0.8); 


    -webkit-border-top-right-radius: 7px; 
    -moz-border-top-right-radius: 7px; 
    border-top-right-radius: 7px; 

    -webkit-border-bottom-right-radius: 25px; 
    -moz-border-bottom-right-radius: 25px; 
    border-bottom-right-radius: 25px; 

}