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.
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;
}
精彩评论