CSS Triangle Positioning

Problem

Basically what I want is a CSS Triangle that is vertically aligned in the center of my content, positioned at the right of my content with a slight padding without using explicit measurements based on the triangle's border-width.

The wrapper should expand to contain the CSS Triangle if the triangle is huge like in this example and the CSS Triangle should always be vertically aligned in the middle of the wrapper. If there is a large amount of text, the CSS Triangle should just overlap the text if they cross.

This seems perfectly reasonable, but I ran into some problems; check out this JsFiddle for where I'm at now.

If I assign a min-height, I can get to 1. below. The problem with 1. is that I have to choose an arbitrary height. Moreover, if content grows, it won't be perfectly vertically centered because of the top: 25% which doesn't truly put it in the middle. To allow multiple different sizes of arrows easily, I really don't want to assign a min-height or any height for that matter, I just want it to calculate its size on its own.

I also had to use an overflow: hidden to prevent the scrollbar from appearing because doing a right: -45px will push the "right side" of the CSS Triangle box, so I can't use an overflow: visible anywhere too.

If I remove the fixed height, then I end up with 2.

Is this possible to do without using an explicit height and other explicit measurements; how would you go about correctly vertically aligning it? If you have ideas using jQuery to grab widths and so forth, that's fine too - I've tagged it.

CSS Triangle Image

Problem courtesy of: Eric Hotinger

Solution

Here is some jQuery to get rid of the hard-coded heights after assigning an arrowBox class to your div:

$(document).ready(function(){
  $(".arrowBox").each(function(){
    var border = $(this).height()/4;
    var right = "-"+(border-5)+"px";
    $(this).find(".arrow").css("border-width",border).css("right",right);
  });
});

http://jsfiddle.net/wzzRC/1/

That said, the difficulty with any pure CSS solution is that you can't specify border-width in %. So with pure CSS, use one of the other solutions to force the box to grow to accommodate the arrow. If you want a working arrow in smaller boxes, you need JS.

Solution courtesy of: thelr

Discussion

Change the triangle css to have:

top: 50%;
margin-top: -50px;

http://jsfiddle.net/QuwEc/4/

Discussion courtesy of: David Nguyen

Set position: relative; on the white box container.

Set position: absolute; on the triangle with a top of 50% and margin-top: of half the height of the triangle.

That will make sure that the triangle is always in the middle.

Discussion courtesy of: user1970409

This recipe can be found in it's original form on Stack Over Flow.