Question

我想给一个元素一个边框顶部，右边有一个标签，如下所示：

由于这将是Adobe Business Catalyst模板中的重复元素，我希望它是纯CSS或至少CSS和javascript，而不使用任何图像。有什么方法可以做到吗？

因为它只是一个装饰元素，所以它不一定是跨浏览器。

Answer 1

看看这个：

HTML：

<body>
<div class="element">

</div>
</body>

CSS：

body { background: #555 }

.element { background: #000; border-top: 2px solid #fff; height: 100px; position: relative; width: 300px; }

.element:after { background: #fff; content: " "; height: 10px; position: absolute; right: 0; top: 0; width: 20px; }

它利用：after伪元素（我发现它非常有用！）

有关详细信息，请参阅此处：

http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/

不幸的是，这在IE7或6中不起作用 - 它不是网站功能的核心，所以我说它没问题。

我可以制作纯css标签边框吗？

1 个答案: