MyBB Community Forums

As you can see the triangle looks outside of the border. How do I go about making the border of the bubble transparent for that little bit where the triangle is so it looks all together instead of separate? Here's my current CSS code. I'd appreciate any help because I'd really like to implement this on my forum.

.post_body {

-moz-border-radius:6px 6px 6px 6px;

border-radius:6px 6px 6px 6px;

border:1px solid #000000;

background:none repeat scroll 0 0 #cedfff;

margin:5px;

margin-bottom:10px;

padding:15px;

color:#000;


}



.post_arrow {

border-bottom:15px solid #cedfff;

border-left:15px solid transparent;

border-right:15px solid transparent;

height:0;

margin-bottom:-12px;

margin-left:15px;

margin-top:3px;

width:0;

}

This is to easy. Delete this> border:1px solid #000000; <and call it a day

border:0;
or border-color: transparent;

(2011-10-07, 11:07 AM)Bounty Killer Wrote: [ -> ]This is to easy. Delete this> border:1px solid #000000; <and call it a day

I want the border, I just don't want the border where the triangle is, that way it looks as if the triangle is part of the bubble. If you take a look at the picture you'd see that the border goes over the bottom of the triangle, and I want it to be transparent where that is. I'm not quite sure if I'm explaining this good enough...

Can you post your whole code (including html)?

This was the HTML:

<div class="post_arrow"></div>

<style type="text/css">

.post_body {
-moz-border-radius:6px 6px 6px 6px;
border-radius:6px 6px 6px 6px;
border:1px solid #000000;
background:none repeat scroll 0 0 #EAEAEA;
margin:5px;
margin-bottom:10px;
padding:15px;
color:#000;
}

.post_arrow {
border-bottom:15px solid #EAEAEA;
border-left:15px solid transparent;
border-right:15px solid transparent;
height:0;
margin-bottom:-12px;
margin-left:60px;
margin-top:3px;
width:0;
}

</style><div class="post_arrow"></div>

Try to add this to your code:

.post_arrow {
position:relative;
z-index:1;
margin-bottom:-1;
}

That worked! Awesome!

Now is there any possible way to give the actual triangle a border?

I tried messing with its border properties and it got all funky.

IDK but I think that if you change the triangle border width, it will stop being a triangle.

That is why people use a image for the triangle.

(2011-10-08, 03:32 AM)Sama34 Wrote: [ -> ]IDK but I think that if you change the triangle border width, it will stop being a triangle.

That is why people use a image for the triangle.

Yeah, that's what it did to me.

Thanks though, I appreciate your help, I'll probably just use an image as well.