Jump to content

Irregular Shap CSS


Recommended Posts

I have create a hover popup on a new feature I'm implementing, and I'm not to sure if what i'm looking to do is possible or not.


Ive seen some similar examples on Google, but all of them use large border widths to create triangles and polygon shapes using css.. i believe I this will not work with what i need to create since i want to fill and a dotted pink (#FEF1F2) border.


I have attached an example of the spec I'll be creating, if anyone has an idea of how to make the oddly shaped popup bubble, could you please help me out. (I think I'm going to be asking the design team for an image, but I'd like to try it do it in just css if possible?).


Im not very good with css, only the basics really so in any examples please explain as best you can so i can try to understand this. Thanks!post-28805-062556600 1328115041_thumb.png

Link to comment
Share on other sites

You do this with 2 divs and a span tag.


The first div will wrap the other div. We'll call it 'popup-wrap'. You will give that div a position:relative; and a padding-left: 30px (or whatever your triangular image width is). Naturally, we want to hide this using display: none but just leave it as is until you get the design of the popup box done.


Next, you would add the inner div and style it according to you mockup (i.e. border, background-color, height, width, etc). We'll call that div 'popup-inner'.


You would then apply your span tag just before the closing 'popup-wrap' div. To be sure it doesn't not interefe with any span tags that might be used in the popup content let's add a class called 'pointer' Set the span to have a width, height and display: block;. Next, you will add position:absolute to it with top: 0 and left:0 for starters. You can either set the triangular image to be contained within the span tag or use the background-image css.


Once you got it laid out correctly then you can set the 'popup-wrap' to display: none;


Of course you will have to tweak the hover affect to get the popup to appear and position correctly.


Here's the html to get your started:


<a href="#"><img alt="" src="the url to your image badge">

<div class="popup-wrap">

<div class="popup-inner">



<span class="pointer"></span>



You can css it based on what I mentioned earlier. Of course you will need to css the anchor tag to set the popup to hide and appear on hover.


a div.popup-wrap {display: none;}

a:hover div.popup-wrap {display: block;}


If you have issues, upload it to your site and provide a url.

Link to comment
Share on other sites



The only image I have is the 'idea exchange' icon. You've made reference to my 'triangle image' that I don't have. Do i need to get my design team to supply me with one to use your recommendation, I was hoping to make the dotted borders using only css, if that was possible.


I do have the design team making me transparent image of the popup and the rounded corner border as well in case i want / need to use it

Link to comment
Share on other sites

I am assuming dotted pink border is for the popup window?


Based on your attached image, you can easily crop out that triangle pointer. If you need it to be pink then go ahead and set your popup per my instructions and apply the pink border around the inner div. Give this to your design team to have them create the pointer image to match.


As for css, I do believe there is a way to do the triangle pointer but all the ones I have seen uses way too many div/span tags and css. Other uses javascript or jquery. Mine would be easier and less complicated even though the pointer will be fixed into position.


Google tooltip popups. You might find something you would like to use instead.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...