CODEWITHSUNDEEP
javascripthtmlcss
Eric Hotinger
Eric Hotinger

Reputation: 9306

CSS Triangle Positioning

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

Upvotes: 0

Views: 1125

Answers (3)

thelr
thelr

Reputation: 1194

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.

Upvotes: 2

user1970409
user1970409

Reputation: 53

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.

Upvotes: 2

David Nguyen
David Nguyen

Reputation: 8528

Change the triangle css to have:

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

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

Upvotes: 1

Related Questions