Html 什么'；It’对这幅图像进行编码的最佳技术是什么

我有这样一张照片：

---

我想使用html和css3对这个图像进行编码（只是条形图，而不是背景-背景可以更改）。它必须在高度和宽度上可伸缩。最好的技术是什么？谢谢。

我可能不推荐这是最好的技术，但不知怎的，它会工作得更好：

使用线性渐变：线性渐变是指在直线上两点之间的距离上，颜色之间逐渐过渡的渐变。在最简单的情况下，线性渐变将沿线条的全长在两种颜色之间成比例地变化

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

---

这是我用div能得到的最接近的

也许使用canvas可以更好地获得箭头，但它需要javascript。 Javascript还可以解决类似箭头的框的背景颜色问题。：）

演示： ​

截图：

HTML部分：

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

​

好的，你可以试试这个（仅在Firefox11中测试过）

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>

在我看来，这有点像黑客，但它似乎非常接近你想要的。唯一可能存在问题的是：

向后兼容性。旧版本的IE可能会窒息，因此值得测试它，并根据需要攻击IE兼容性

如果框变得太大，箭头可能与框的颜色不同。我想不出解决这个问题的方法，所以将箭头放置在静态位置可能会有更好的效果

---

你可以在这里找到一个JSFiddle:

这只是解决了梯度问题，我更感兴趣的是将右箭头合并到整个事情中。因为箭头也有梯度，应该对应于整个条上的梯度。这是很难做到的。@jesteuvidim adobe photoshop怎么样？只是

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

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