Как я могу сделать речевой пузырь только с CSS с рамкой?

Я хочу сделать речевой пузырь только для CSS. Пока у меня это...

Пример

Пример пузыря

CSS

div {
    position: relative;
    background: #fff;
    padding: 10px;
    font-size: 12px;
    text-align: center;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

div:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    bottom: -60px;
    margin-left: -15px;
    border-width: 30px 20px 30px 20px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}

jsFiddle.

...что почти точно то, что я хочу. Тем не менее, я хочу светлую рамку вокруг всего этого.

Очевидно, что в основной части это просто добавить border: 1px solid #333 к div.

Однако, поскольку хвост пузыря — это крайний хак, я не могу использовать с ним границу.

Я попытался установить тень блока 0 0 1px #333, но браузеры применяют границу к прямоугольной форме элемента (что, я думаю, они должны делать).

jsFiddle.

Следующей моей мыслью было найти символ Unicode, который выглядит как хвост пузырька, и абсолютно разместить его там, с text-shadow для границы и с помощью z-index основного пузырька, чтобы скрыть верхнюю тень текста.

Какой символ Юникода подойдет для этого? Должен ли я сделать что-то другое? Нужно ли прибегать к изображению?

Мне нужно только поддерживать Mobile Safari. :)


css mobile-safari
person alex    schedule 10.08.2011    source источник
comment
@samccone Конечно, но не забывайте о :before и :after (учитывая, что я ориентируюсь только на Mobile Safari, который поддерживает псевдоэлементы).   -  person alex    schedule 10.08.2011
comment
@alex Этот пограничный хак такой классный :) Я сделал вариант: jsfiddle.net/vgk6p/1< /а>   -  person Šime Vidas    schedule 10.08.2011
comment
@Šime Vidas Очень сексуально! Отличная работа :)   -  person alex    schedule 10.08.2011

Ответы (4)


arrow_upward
2
arrow_downward 

<div>Hello Stack Overflow!<span></span></div>

div span:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    bottom: -51px;
    margin-left: -15px;
    border-width: 20px 20px 30px 20px;
    border-style: solid;
    border-color: #000 transparent transparent transparent;
}

http://jsfiddle.net/QYH5a/

person Joseph Marikle    schedule 10.08.2011
comment
Это просто позиционирует то же самое за ним, чтобы оно выглядело как граница? Я не подумал об этом... спасибо. Что случилось с Ха! взломан!? - person alex; 10.08.2011
comment
@alex Просто праздную свою победу над проблемой... хорошо, да, это было высокомерно... извините... - person Joseph Marikle; 10.08.2011

arrow_upward
1
arrow_downward

Для предложенного вами подхода к символам Unicode наиболее подходящим будет ▼ U + 25BC ЧЕРНЫЙ ТРЕУГОЛЬНИК, УКАЗЫВАЮЩИЙ ВНИЗ. Я не знаю, есть ли для iOS глифы.

person Kevin Reid    schedule 10.08.2011

arrow_upward
1
arrow_downward

Вот похожее решение:

http://jsfiddle.net/JyPBD/2/

<div>Hello Stack Overflow!<span></span></div>

body {
   background: #ccc;   
}

div {
    position: relative;
    background: #fff;
    padding: 10px;
    font-size: 12px;
    text-align: center;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    border: 1px solid #333;
}
div:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    bottom: -60px;
    margin-left: -16px;
    border-width: 30px 20px 30px 20px;
    border-style: solid;
    border-color: green transparent transparent transparent;

}

div span
{
    border-color: #FF0000 transparent transparent;
    border-style: solid;
    border-width: 25px 15px;
    bottom: -51px;
    margin-left: -65px;

    position: absolute;
    z-index: 10;
}
person samccone    schedule 10.08.2011

arrow_upward
0
arrow_downward

Вы можете использовать свойство filter с box-shadow(), чтобы сделать это...

-webkit-filter: drop-shadow(1px 1px 1px #111) drop-shadow(-1px -1px 1px #111);

jsFiddle.

person alex    schedule 29.03.2013