我想给一个元素一个边框顶部，在右上角有一个标签，如下所示：
由于这将是 Adobe Business Catalyst 模板中的重复元素，我希望它是纯 CSS 或至少是 CSS 和 javascript，而不使用任何图像。有什么办法可以做到这一点？
由于它只是一个装饰元素，它不必是跨浏览器的。
问问题
182 次
1 回答
4
看看这个：
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 伪元素（我发现它非常有用！）
有关更多信息，请参见此处：
不幸的是，这在 IE7 或 6 中不起作用——尽管它不是网站功能的核心，所以我认为它是可以的。
于 2012-11-27T16:36:44.293 回答