sandy1028 Posted August 10, 2007 Share Posted August 10, 2007 Hi, How to create a rectangle with an arrow in CSS as the ballon tooltip image.... I dont want to insert the background-image for tooltip... Help me in CSS code to create the border as the balloon tooltip as in the attached image [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
jcombs_31 Posted August 10, 2007 Share Posted August 10, 2007 You can't do that with CSS. Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted August 10, 2007 Share Posted August 10, 2007 css3 could do it but support is sadly lacking at the moment Quote Link to comment Share on other sites More sharing options...
jcombs_31 Posted August 10, 2007 Share Posted August 10, 2007 I think it could do the rounded corners but not the arrow. You need an image for this. There is a javascript solution called nifty corners I think to get the rounded corners. Quote Link to comment Share on other sites More sharing options...
moberemk Posted August 10, 2007 Share Posted August 10, 2007 Hmm... If you're willing to drop the corners, try using two CSS image in the background, one with the top rounded corners and the spike and one with the bottom two corners. By adding a third repeating background image with the side borders, you'd have what you're looking for, but it would involve a lot of extra code. Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted August 10, 2007 Share Posted August 10, 2007 css3 can do the arrow... http://www.css3.info/preview/border-image.html when it gets here.... NOW you CAN do it with css2 BUT you will need a whole lot more html.... <div class="speechbubble"> <div class="topleft"></div> <div class="topline"></div> <div class="topright"></div> <div class="content">TEXT IN HERE</div> <div class="bottomleft"></div> <div class="bottomright"></div> </div> u may even need another div in between bottom left and bottomright... split your speechbubble image up into its relevant bits and set them to teh background of teh relevant divs... Quote Link to comment Share on other sites More sharing options...
moberemk Posted August 11, 2007 Share Posted August 11, 2007 Actually, that wouldn't work well with the border he also wants-and here, fixed-width is definitely the way to go, so that you don't need so many extra tags; for example, for something like this, I'd give the header text of the bubble the top curves and pointing image, and then the footer text the bottom curves, to minimize extra CSS. Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted August 12, 2007 Share Posted August 12, 2007 actually its the only way to creat the speech bubble with just css. you can easily sort ot the borders (the onld div to have borders would be the content div and that would have just left and right - all other 'borders' would be in a background image). Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.