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

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?

possible duplicate of [How to make angled tab like this using css?](http://stackoverflow.com/questions/8895273/how-to-make-angled-tab-like-this-using-css) and http://stackoverflow.com/questions/6474168/how-do-i-make-corners-angled-like-this-using-css — j08691, Apr 17 '12 at 17:37
I think the "triangles" part of the duplicate is your answer. — Diodeus - James MacFarlane, Apr 17 '12 at 17:41
http://www.malsup.com/jquery/corner/ Found a great plugin I will leave it here for future reference. — Ghokun, May 08 '13 at 15:12

Ghokun · Accepted Answer · 2012-04-17T18:43:37.187

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;}

score 3 · Answer 2 · answered Apr 17 '12 at 17:33

3

CSS does not support any non-square, non-rounded border shapes. You can use a bunch of DIVs with stepped widths or an image, but CSS alone can't really help.

Alternately, you can try overlaying some CSS triangles, but that's a bit of a hack.

answered Apr 17 '12 at 17:33

Diodeus - James MacFarlane

112,730
33
157
176

The Dupe has the complete solution: http://stackoverflow.com/questions/8895273/how-to-make-angled-tab-like-this-using-css – Diodeus - James MacFarlane Apr 17 '12 at 17:39
You mean rounded corner + triangle? But how to avoid using rounded corner? I am not pretty sure how to combine shapes in this case :S – user592704 Apr 17 '12 at 17:51
You need to add a DIV that contains the triangle, then absolutey position it over the corner of your tab. – Diodeus - James MacFarlane Apr 17 '12 at 17:55
I see, but what about the bottom? I need somehow to add another rectangle right under the triangle or something? – user592704 Apr 17 '12 at 17:59

score 2 · Answer 3 · answered Aug 19 '13 at 22:58

2

Using border-corner-shape css attribute could have done the trick... if it was implemented in CSS3! It's proposed in CSS4 draft though - yeah no kidding!

Implementation is uncertain however and need support. Read: http://lea.verou.me/2013/03/border-corner-shape-is-in-danger-and-you-can-help/

answered Aug 19 '13 at 22:58

CockpitSeeker

21
1

Thanks. But I didn't get the http://lea.verou.me/wp-content/uploads/2013/03/bevel-4.png ... What the two images mean? I mean one css and two images? Could you give more details? – user592704 Aug 20 '13 at 18:39

score 0 · Answer 4 · answered Apr 17 '12 at 17:34

0

If that corner can be rounded, border-radius is probably all you need: http://border-radius.com/

If the corner has to be at an angle, you're not likely to get that without some pretty messy HTML. There is no standard property that would do it. The best alternative is to make that particular part of the border an image and then use background-image and background-position to place it in the upper corner.

answered Apr 17 '12 at 17:34

VoteyDisciple

37,319
5
97
97

Background-image for the right upper corner? But how to make its scale dynamic then? I mean it demands some absolute position or something? – user592704 Apr 17 '12 at 17:47
There's no need for absolute positioning; simply use percentages to position the content. – VoteyDisciple Apr 19 '12 at 13:57

score -1 · Answer 5 · answered Apr 17 '12 at 17:34

-1

You can use CSS3 border-radius property : http://www.w3schools.com/cssref/css3_pr_border-radius.asp (example)

answered Apr 17 '12 at 17:34

David Bélanger

7,400
4
37
55

3

I believe the OP is looking for a sharp corner, not a rounded one. – j08691 Apr 17 '12 at 17:34
@j08691 I know but like others said, sharp corner can't be really done in CSS... I suggested an alternative. – David Bélanger Apr 17 '12 at 17:35
Yes, but it tricky and non-standard. – David Bélanger Apr 17 '12 at 17:38

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

5 Answers5