HTML speechbubble标记

Question

fyi：我正在为一些语音泡沫制作HTML标记 这种复杂标记的原因是语音泡沫应随其内容而增长。

所以，首先是我最近的标记：

<div class="speachbubble">
<div class="topbar">
    <div class="corner top-left"></div>
            <div class="top"></div>
            <div class="corner top-right"></div>
    <div class="clear"></div>
</div>
<div class="middlebar">
    <div class="left"></div>
            <div class="content">HERE iS SOME TEXT</div>
            <div class="right"></div>
    <div class="clear"></div>
</div>
<div class="bottombar">
    <div class="corner bottom-left"></div>
            <div class="bottom"></div>
            <div class="corner bottom-right"></div>
    <div class="clear"></div>
</div>

在上传的图片中，您可以在左侧看到整个speachbubble。右侧显示分割图形。 因此，speachbubble中的内容保持动态的长度。

我在复杂的CSS事情上非常糟糕，也许有人可以帮助我？ :( 非常感谢！

PS：所有这些都应该用CSS3编写！

Answer 1

你不需要复杂的标记来使文本“可增长”;语音泡沫实际上不是CSS3（除了圆角）。 下面的例子是所有CSS1，除了“：after”选择器是CSS2

看看这个小提琴：http://jsfiddle.net/FbHVk/3/

或者查看下面的代码html和css：

HTML：

<span class="bubble"> this is some text</span>

CSS：

.bubble{
   position:relative;
   padding: 10px;
   background: #AAAAFF;
}

.bubble:after{
   position:absolute;
   content: ""; 
   top:15px;right:-10px;
   border-width: 10px 0 10px 15px;
   border-color: transparent  #AAAAFF;
   border-style: solid;
 }​

Answer 2

为什么要在其插件中使用一些jQuery

节省你的时间也试试这个：

qTip

Answer 3

理论上你只需要顶栏和底栏。如果你把图像放在中间，它就不会与文本一起正常生长。将整个顶栏设为一个图像，将底栏设为另一个图像，并将它们分别设置为topbar和bottombar的背景。然后，您需要为speechbubble定义宽度，该宽度等于用于topbar和bottombar的图像的宽度。从您在右侧和左侧使用的图像中获取宽度，并分别将padding-right和padding-left放在文本上。这样您就可以保持圆角效果并使内容增长。

Answer 4

感谢您的回答。我为两个不同的人说话时略微修改了它。

http://jsfiddle.net/FbHVk/73/

<style type="text/css">
    .bubbleright {
        position:relative;
        padding: 10px;
        background: #ddd;
        margin: 5px 5px;
        max-width: 250px;
        left: 50px;
    }

    .bubbleright:after{
        position:absolute;
        content: ""; 
        top:15px;right:-10px;
        border-width: 10px 0 10px 15px;
        border-color: transparent  #ddd;
        border-style: solid;
     }

    .bubbleleft{
        position:relative;
        left: 15px;
        padding: 10px;
        background: #aaa;
        margin: 5px 5px;
        max-width: 250px;
    }

    .bubbleleft:before{
        position:absolute;
        content: ""; 
        top:15px;left:-10px;
        border-width: 10px 15px 10px 0px;
        border-color: transparent  #aaa;
        border-style: solid;
    }

</style>

<div class="bubbleleft">
  I say something
</div>

<div class="bubbleright">
  So does he
</div>