CSS границы Brainteaser

Question

CSS границы Brainteaser

0

У меня есть следующий CSS, который создает синий пузырь речи (скрипт JS: http://jsfiddle.net/C5N2c/:

<div class="bubble">Content</div>

.bubble 
{
    cursor: pointer;
    position: absolute;
    left:30px;
    width: 200px;
    height: 50px;
    padding: 0px;
    background: blue;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: blue solid 6px;

}

.bubble:after 
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 10px 10px;
    border-color: blue transparent;
    display: block;
    width: 0;
    z-index: 1;
    top: -10px;
    left: 26px;
}

.bubble:before 
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 15px 15px;
    border-color: blue transparent;
    display: block;
    width: 0;
    z-index: 0;
    top: -21px;
    left: 21px;
}

Я хочу добавить красную границу 1px по краю этого пузыря, включая маленькую стрелку речи. Как я могу это сделать? Он должен быть совместим с IE8.

alias51 12 нояб. 2013, в 17:42

Источник

0

Это довольно сложно сделать с CSS. Я использовал изображение для речевой стрелки и прикрепил границу вокруг пузыря.
Stefano L 12 нояб. 2013, в 16:29
1

Вам нужно сделать границу вокруг части речевой стрелки, наложив один элемент, чтобы замаскировать другой, который у вас почти есть.
Marc Audet 12 нояб. 2013, в 16:32

Теги:

html

css

3 ответа

0

Попробуйте этот код:

.bubble 
{
    cursor: pointer;
    position: absolute;
    left:30px;
    width: 200px;
    height: 50px;
    padding: 0px;
    background: blue;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: blue solid 6px;
    box-shadow: 0 0 0 1px red;
}

.bubble:after 
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 15px 15px;
    border-color: blue transparent;
    display: block;
    width: 0;
    z-index: 0;
    top: -19px;
    left: 21px;
}

.bubble:before 
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 15px 15px;
    border-color: red transparent;
    display: block;
    width: 0;
    z-index: 0;
    top: -21px;
    left: 21px;
}

См. Этот jsfiddle.

zsaat14 12 нояб. 2013, в 14:44

0

См. Рабочую версию jsFidde

Я сделал это когда-то, вы можете просто изменить цвета, он не тестировался в IE, я в настоящее время на OSX, и это беспорядок пытается просмотреть его на IE xD

HTML:

<div class="dialog">
    <div class="triangleOutline">
        <div class="triangle"></div>
    </div>
    <div class="dialogBox">
        Hello!<br>
        I'm a full CSS fancy dialog box :D
    </div>
</div>

CSS:

body{
    font-size: 100%;
    font-family: "Arimo";
    background: #eee;
}

.triangle,
.triangleOutline{
    position:relative;
    width: 0;
    height: 0;
    border: solid transparent;
    border-width: 7px;
    border-bottom-color: #aaf;
}

.triangleOutline{left: 15px;}

.triangle{
    top: -6px; /* outline width - 1 */
    left: -7px; /* outline width */
    border-bottom-color: white;
}

.dialogBox{
    background: white;
    border: 1px solid #aaf;
    padding: 0.75em;
    border-radius: 3px;
    min-height: 1.5em;
    line-height: 1.5em;
}

Просто измените цвета, как вам нравится, я думаю, вы не используете ТОСЫЕ цвета правильно? XD

aleation 12 нояб. 2013, в 14:19

Ещё вопросы

Это довольно сложно сделать с CSS. Я использовал изображение для речевой стрелки и прикрепил границу вокруг пузыря.
Вам нужно сделать границу вокруг части речевой стрелки, наложив один элемент, чтобы замаскировать другой, который у вас почти есть.

SW4 · Accepted Answer · 2013-11-12T14-56-00.000Z

Взгляните на этот скрипт, хотя я не смог проверить его в IE8..

CSS:

.bubble 
{
    cursor: pointer;
    position: absolute;
    left:30px;
    width: 200px;
    height: 50px;
    padding: 0px;
    background: blue;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: red solid 1px;
    z-index:2;
}

.bubble:after 
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 9px 9px;
    border-color: blue transparent;
    display: block;
    width: 0;
    z-index: 1;
    top: -9px;
    left: 26px;
}

.bubble:before 
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 11px 12px;
    border-color: red transparent;
    display: block;
    width: 0;
    z-index: 0;
    top: -12px;
    left: 24px;
}

Может быть, немного точнее: jsfiddle.net/C5N2c/17