Make cut-off corners with a border

I want to make a shape in html that has cutoff corners and with a borderline around the shape.

I can make cut-off shapes without a border like so:

html:

<div class="cut-off"></div>

css:

 .cut-off{
   position:relative;
   top:400px;
   left:400px;
   height:155px;
   width:200px;
   background:red;
}
.cut-off:after{
   position:absolute;
   bottom:0px; right:-20px;
   content:".";
   text-indent:-999px; overflow:hidden;
   display:block;
   width:0px; height:0px;
   border-top: 20px solid green;
   border-right: 20px solid transparent;
}
.cut-off:before{
   position:absolute;
   top:0; right:-20px;
   content:"#";
   text-indent:-999px; overflow:hidden;
   display:block;
   background:blue;
   width:20px; height:135px;
} 

Jfiddle here

Now i want a border that goes around the shape. How should i do that?

I want a shape that is something like this:

Filled with a color.