CSS границы головоломка

Question

У меня есть следующие 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 совместимый

Answer 1

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

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

Answer 2

Смотрите рабочую версию на 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's width - 1 */ 
    left: -7px; /* outline's 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

Answer 3

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

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