html - 对该图像进行编码的最佳技术是什么

Question

我有这张图片:

我想使用 html 和 css3 对该图像进行编码(只是栏，而不是背景 - 背景可以更改)。它的高度和宽度必须是可缩放的。做到这一点的最佳技术是什么？谢谢。

Answer 1

好的，您可以尝试一下(仅在 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/