How to create triangle shape in the top-right angle of another div to look divided by border

I want to create shape like on this picture:

I created triangle shape like on this pic, and set the margins to be in top right angle, but I don't know how to make it look divided from the left div like shown on picture.

Do I have to "cut" left div to remain its grey border and to look divided from green triangle?

Is there any idea how to do this?

EDIT:

1. I am using fixed navigation bar on page, so when I scroll if div is position:absolute, navigation bar goes behind div.
2. Space between green triangle and rest of div should be transparent, because I am using image as page background.

I'd suggest, given the following mark-up:

#box {
    width: 10em;
    height: 6em;
    border: 4px solid #ccc;
    background-color: #fff;
    position: relative;
}

#box::before,
#box::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-color: transparent;
    border-style: solid;
}

#box::before {
    border-width: 1.5em;
    border-right-color: #ccc;
    border-top-color: #ccc;
}

#box::after {
    border-radius: 0.4em;
    border-width: 1.35em;
    border-right-color: #0c0;
    border-top-color: #0c0;
}

<div id="box"></div>

Place two absolutely positioned divs within a container div with position relative. Then make the triangles with the outer triangle being slightly larger than the inner triangle. Then position these elements in the upper right hand corner of the container.

HTML

<div class="container">
    <div class="inner-triangle"></div>
    <div class="outer-triangle"></div>
</div>

CSS

.container{
    border: 2px solid gray;
    position: relative;
    height: 100px;
}

.inner-triangle{
    border-left: 20px solid transparent;
    border-right: 20px solid green;
    border-bottom: 20px solid transparent;
    height: 0;
    width: 0;
    position: absolute;
    right: 0px;
    z-index: 2;
}

.outer-triangle{
    border-left: 22px solid transparent;
    border-right: 22px solid gray;
    border-bottom: 22px solid transparent;
    height: 0;
    width: 0;
    position: absolute;
    right: 0px;
    z-index: 1;
}

JS Fiddle: http://jsfiddle.net/u8euZ/1