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>