开发者

CSS Border over div columns

I want to design some speech bubble like comment box in HTML with CSS. However I can't get the filler div to use the remaining width.

CSS Border over div columns

So how can I get the border to be complete?

I created a jsfiddle with my complete code (except for the images). http://jsfiddle.开发者_Go百科net/qHVk3/


Here what I was able to do, basically filler is 100% wide but is under the arrow.

http://jsfiddle.net/aWxPX/


Do you know the width of the whole bubble? You could split up the space between the date div and the filler div then.


It looks like you're doing a lot more complex css than what you need to.

Take a look at this, it is a speech bubble done completely with css and one paragraph tag:
http://jsfiddle.net/XBZaA/2/

It comes from here and you can get all sorts of complex styles of arrows and thought bubbles depending on the css and how many html elements you're ok with:
http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

HTML

<p class="triangle-border">This only needs one HTML element.</p>

CSS

.triangle-border {
    position:relative;
    padding:15px;
    margin:1em 0 3em;
    border:5px solid #5a8f00;
    color:#333;
    background:#fff;
    /* css3 */
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
}

.triangle-border:before {
    content:"";
    position:absolute;
    bottom:-20px; /* value = - border-top-width - border-bottom-width */
    left:40px; /* controls horizontal position */
    border-width:20px 20px 0;
    border-style:solid;
    border-color:#5a8f00 transparent;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

/* creates the smaller  triangle */
.triangle-border:after {
    content:"";
    position:absolute;
    bottom:-13px; /* value = - border-top-width - border-bottom-width */
    left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
    border-width:13px 13px 0;
    border-style:solid;
    border-color:#fff transparent;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜