纯CSS语音泡沫与边框 [英] Pure CSS Speech Bubble with Border

问题描述

因此，我正在开发纯粹的css语音泡沫 http://bit.ly/zlnngM ，但我想要边框包围整个对话气泡，如 http://bit.ly/zUgeZi 所示。我使用了以下标记;

So I'm working on a pure css speech bubble http://bit.ly/zlnngM but I'd like to have the border surround the entire speech bubble as seen here http://bit.ly/zUgeZi . I'm using the following markup;

<div class="speech-bubble"><p>This is a speech bubble created using only CSS. No images to be found here...</p></div

到目前为止，它的样式如下：

and I've so far styled it as follows;

.speech-bubble {
margin: 3em;
width: 320px;
padding: 10px;
background-color:rgba(250, 250, 250, 0.95);
color: #666;
font: normal 12px "Segoe UI", Arial, Sans-serif;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 10px solid rgba(0,0,0,0.095);
}

.speech-bubble:before
{
content: "";
border: solid 20px transparent; /* set all borders to 10 pixels width */
border-top: 0; /* we do not need the top border in this case */
border-bottom-color:rgba(250, 250, 250, 0.95);
width: 0;
height: 0;
overflow: hidden;
display: block;
position: relative;
top: -30px; /* border-width of the :after element + padding of the root element */
margin: auto;
}

.speech-bubble p {
margin-top: -15px;
font-size: 1.25em;
}

正如你所看到的，我只能在内容框中添加边框。语音泡沫）而不是标注（.speech-bubble：before）我的边框也需要透明。不知道这是否重要，但它是一个要记住的事情。有任何建议吗？

As you can see I can only add a border to the content box (.speech-bubble) but not the callout (.speech-bubble:before) My border will also need to be transparant. Not sure if this matters but it's something to bear in mind. Any advice?

推荐答案

您只需要使用：之前和：之后即可叠加另一个三角形边框。

You're pretty close. You just need to use both a :before and an :after to layer another triangular border.

这里是一个jsfiddle： http://jsfiddle.net/rgthree/DWxf7/ 和CSS使用：

Here's a jsfiddle: http://jsfiddle.net/rgthree/DWxf7/ and the CSS used:

.speech-bubble {
    position:relative;
    width: 320px;
    padding: 10px;
    margin: 3em;
    background-color:#FFF;
    color: #666;
    font: normal 12px "Segoe UI", Arial, Sans-serif;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 10px solid rgba(0,0,0,0.095);
}
.speech-bubble p {
    font-size: 1.25em;
}

.speech-bubble:before,
.speech-bubble:after {
    content: "\0020";
    display:block;
    position:absolute;
    top:-20px;  /* Offset top the height of the pointer's border-width */
    left:20px;
    z-index:2;
    width: 0;
    height: 0;
    overflow:hidden;
    border: solid 20px transparent;
    border-top: 0;
    border-bottom-color:#FFF;
}
.speech-bubble:before {
    top:-30px; /* Offset of pointer border-width + bubble border-width */
    z-index:1;
    border-bottom-color:rgba(0,0,0,0.095);
}

这篇关于纯CSS语音泡沫与边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！