CSS border shape - how to cut off rectangle right upper corner [duplicate]

Question

I just wondering is there way to make a tab like shape border? To be more clear I am to draw the shape in asterisks. I mean this border shape.

*********************
***********************
*************************
***************************
***************************
***************************
***************************
***************************

For this how in CSS cut off the rectangle right upper corner? Or what is a more optimal way?

Answer 1

You can use borders to achieve something like that. jsfiddle Maybe not the best answer but a start point if you insist on pure css.

Edit: Updated JsFiddle Demo here

Markup

<div>
<div class="wrapper inner">
    <div class="abc"></div>
    <div class="container">I AM A TAB<div>
</div>
<div class="border inner">
    <div class="ab"></div>
    <div class="bcontainer"><div>
</div>
</div>

​

CSS

.inner{position:fixed;}


.border{width:72px;height:52px;z-index:-1;top:0px;}


.wrapper{width:70px;top:1px;left:1px;}


.container {background:rgb(226,226,226);text-align:center;}

.bcontainer{background:black;width:71px;height:41px;}
.abc {
    width: 60px;
    border-bottom: 10px solid rgb(226,226,226);
    border-right: 10px solid transparent;
}

.ab{    width: 61px;
    border-bottom: 11px solid black;
    border-right: 10px solid transparent;}​