CSS border shape – how to cut off rectangle right upper corner


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?

Best Solution

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


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





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

.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;}​
Related Question