Как лучше всего кодировать это изображение?

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/

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.

Вероятно, можно получить стрелку лучше, используя canvas, но для этого потребуется 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;

}

1018 *