CODEWITHSUNDEEP
htmlcss
Mini John
Mini John

Reputation: 7941

Creating a css Ribbon

I'm trying to put a "triangle" in the top right of a Div. Somehow i mess it up every time.

That's the Fiddle

That's my div:

<div class="gtcr_ttl_wllt_dash">
    <div class="db_ov_layer center">
      <h1 class="ttl_ammnt">Test Module</h1>
      <span class="prf_ttl">Hello There</span>
    </div>
</div>

In the jsfiddle is a pic and everything Set up, except that sneaky triangle. If anyone has a little free time to Help me out on this .. Would be great.

Upvotes: 0

Views: 174

Answers (2)

Sam
Sam

Reputation: 166

This should do it, give the outermost div position:relative, to the ribbon position:absolute and play with top and right to fix it

http://jsfiddle.net/92gvW/2/

EDIT: and put the ribbon inside the outer div

EDIT 2: I didn't see the image the first time, with some ugly css tricks i did the triangle too

http://jsfiddle.net/92gvW/4/

Basically a small white triangle over a bigger black triangle, shifted 1px

Upvotes: 3

deadconversations
deadconversations

Reputation: 1937

CSS for the wrapping div:

.div-wrap {
    position: relative
}

CSS for your triangle:

.triangle {
    display: block; (if not already a block element)
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
}

Quick fiddle: http://jsfiddle.net/92gvW/3/

Upvotes: 3

Related Questions