CSS 边框形状 - 如何切掉矩形右上角
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10196072/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS border shape - how to cut off rectangle right upper corner
提问by user592704
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?
为此如何在CSS中切掉右上角的矩形？或者什么是更优化的方法？
采纳答案by Ghokun
You can use borders to achieve something like that. jsfiddleMaybe not the best answer but a start point if you insist on pure css.
您可以使用边框来实现类似的功能。jsfiddle如果你坚持纯 css，也许不是最好的答案，而是一个起点。
Edit: Updated JsFiddle Demohere
编辑：在此处更新了JsFiddle 演示
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
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;}?
回答by Diodeus - James MacFarlane
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.
CSS 不支持任何非方形、非圆形的边框形状。您可以使用一堆具有阶梯宽度或图像的 DIV，但仅靠 CSS 并不能真正提供帮助。
Alternately, you can try overlaying some CSS triangles, but that's a bit of a hack.
或者，您可以尝试覆盖一些CSS 三角形，但这有点小技巧。
回答by CockpitSeeker
Using border-corner-shapecss attribute could have done the trick... if it was implemented in CSS3! It's proposed in CSS4 draft though - yeah no kidding!
使用border-corner-shapecss 属性可以做到这一点……如果它是在 CSS3 中实现的！不过它是在 CSS4 草案中提出的 - 是的，不是开玩笑！
Implementation is uncertain however and need support. Read: http://lea.verou.me/2013/03/border-corner-shape-is-in-danger-and-you-can-help/
然而，实施是不确定的，需要支持。阅读：http: //lea.verou.me/2013/03/border-corner-shape-is-in-danger-and-you-can-help/
回答by VoteyDisciple
If that corner can be rounded, border-radiusis probably all you need: http://border-radius.com/
如果那个角可以圆角，border-radius可能就是你所需要的：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-imageand background-positionto place it in the upper corner.
如果角落必须成一个角度，那么如果没有一些非常凌乱的 HTML，您就不可能得到它。没有标准的属性可以做到这一点。最好的选择是将边框的特定部分制作为图像，然后使用background-image并将background-position其放置在上角。
回答by David Bélanger
You can use CSS3 border-radiusproperty : http://www.w3schools.com/cssref/css3_pr_border-radius.asp(example)
您可以使用 CSS3border-radius属性：http: //www.w3schools.com/cssref/css3_pr_border-radius.asp（示例）
