Question

我只是想知道有没有办法制作像边框一样的标签？为了更清楚，我要用星号画出形状。我是指这种边框形状。

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

为此，如何在CSS中切掉右上角的矩形？或者什么是更优化的方式？

Answer 1

您可以使用边框来实现类似的效果。 jsfiddle如果你坚持纯粹的CSS，可能不是最好的答案，而是一个起点。

修改：在此处更新了 JsFiddle Demo

<强>标记

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

Answer 2

CSS不支持任何非方形，非圆形边框形状。您可以使用一堆具有阶梯宽度或图像的DIV，但仅靠CSS无法提供帮助。

或者，您可以尝试覆盖一些CSS triangles，但这有点像黑客。

Answer 3

使用border-corner-shape css属性可以做到这一点......如果它是在CSS3中实现的话！它虽然在CSS4草案中提出 - 是的，不开玩笑！

但实施尚不确定，需要支持。读： http://lea.verou.me/2013/03/border-corner-shape-is-in-danger-and-you-can-help/

Answer 4

如果该角落可以四舍五入，则border-radius可能只需要http://border-radius.com/

如果角落必须是一个角度，如果没有一些非常混乱的HTML，你就不可能得到它。没有标准的财产可以做到这一点。最好的选择是将边框的特定部分设为图像，然后使用background-image和background-position将其放在上角。

Answer 5

您可以使用CSS3 border-radius属性：http://www.w3schools.com/cssref/css3_pr_border-radius.asp（example）

CSS边框形状 - 如何切除矩形右上角

5 个答案: