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

Question

我只是想知道是否有办法制作类似形状边框的标签？更清楚地说，我将以星号绘制形状。我的意思是这种边框形状。

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

为此，如何在CSS中切除矩形的右上角？还是最理想的方法是什么？

Answer 1

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

编辑：在此处更新了JsFiddle 演示

标记

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