Make cut-off corners with a border - html

Question

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.

Answer 1

By altering your html structure a little bit, I could make this
<div class="cut-off"></div>
<div class="cut-off2"></div>​
.cut-off{
position: relative;
width: 300px;
height: 150px;
border-bottom: 80px red solid;
border-right: 80px transparent solid;
}
.cut-off2{
position: absolute;
z-index: -1;
top:0;
left: 0;
width: 305px;
height: 150px;
border-bottom: 82px blue solid;
border-right: 80px transparent solid;
}
p{
position: absolute;
left: 0;
bottom:-40px;
}
​
Basically it adds another div under the existing one. For the cuttof effect it plays with border dimensions.
EDIT: I also provided a way of including content in the area.

Answer 2

Try this out:
<div class="cut-off">content</div>​​​​​​​​​​​
.cut-off{
position:relative;
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;
}
By the way, I found this example in the following page (and therefore I do not claim that the code is mine): http://www.wahnbriefe.net/web-design/css-cut-off-corners

Answer 3

I'm not really sure if this is what you're looking for, but I think you could use the CCS3 border-radius attribute in order to achieve it. Perhaps it is worthwhile taking a look at it. Maybe you can try something like the follwing:
<div class="cut-off">
<p class="text">Simple text</p>
</div>​
.cut-off{
position: relative;
width: 300px;
height: 150px;
border: 1px solid #7A7764;
border-radius: 0 75px 0 0;
}
.text {
margin: 15px;
}
​