5

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

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

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

4

5 回答 5

5

您可以使用边框来实现类似的效果。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>

​</p>

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;}​
于 2012-04-17T18:00:09.693 回答
3

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

或者，您可以尝试覆盖一些CSS 三角形，但这有点小技巧。

于 2012-04-17T17:33:53.060 回答
2

使用border-corner-shapecss 属性可以解决问题……如果它是在 CSS3 中实现的！它是在 CSS4 草案中提出的——是的，不是开玩笑！

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

于 2013-08-19T22:58:20.820 回答
0

如果那个角可以变圆，border-radius可能就是你所需要的：http: //border-radius.com/

如果角落必须是一个角度，那么如果没有一些非常混乱的 HTML，您就不可能得到它。没有标准的属性可以做到这一点。最好的替代方法是将边框的特定部分制作为图像，然后使用background-image并将background-position其放置在上角。

于 2012-04-17T17:34:56.877 回答
-1

您可以使用 CSS3border-radius属性：http ://www.w3schools.com/cssref/css3_pr_border-radius.asp （示例）

于 2012-04-17T17:34:01.993 回答