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

Question

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.

Answer 1

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>