我可以制作一个纯css选项卡式边框吗？
我想给一个元素一个边框顶部，在右角有一个选项卡，如下所示： 因为这将是Adobe Business Catalyst模板中的一个重复元素，所以我希望它是纯CSS，或者至少是CSS和javascript，而不使用任何图像。有什么办法可以做到这一点吗 因为它只是一个装饰元素，所以不必是跨浏览器的。看看这个： HTML: 它使用：after伪元素（我发现它非常有用！） 有关更多信息，请参见此处： 不幸的是，这在IE7或IE6中不起作用-尽管它不是网站功能的核心，所以我想说它现在还可以。看看这个： HTML: 它使用：after伪元素（我发现它非常有用！） 有关更多信息，请参见此处：我可以制作一个纯css选项卡式边框吗？,css,Css,我想给一个元素一个边框顶部，在右角有一个选项卡，如下所示： 因为这将是Adobe Business Catalyst模板中的一个重复元素，所以我希望它是纯CSS，或者至少是CSS和javascript，而不使用任何图像。有什么办法可以做到这一点吗 因为它只是一个装饰元素，所以不必是跨浏览器的。看看这个： HTML: 它使用：after伪元素（我发现它非常有用！） 有关更多信息，请参见此处： 不幸的是，这在IE7或IE6中不起作用-尽管它不是网站功能的核心，所以我想说它现在还可以。看看这个：
不幸的是，这在IE7或IE6中不起作用-虽然它不是网站功能的核心，所以我想说它还可以。当然可以做到。到目前为止你尝试了什么？请展示你迄今为止试图实现这一目标的代码，以便我们提供建议。我真的不知道从哪里开始。我试着在右边加上一个边框，但那肯定会失败。使用div很容易，但因为它是一个元素，所以我不能使用div，而使用伪元素添加内容也不起作用，因为我不能设置它的样式。当然，你可以设置伪元素的样式！当然可以做到。到目前为止你尝试了什么？请展示你迄今为止试图实现这一目标的代码，以便我们提供建议。我真的不知道从哪里开始。我试着在右边加上一个边框，但那肯定会失败。使用div很容易，但因为它是一个元素，所以我不能使用div，而使用伪元素添加内容也不起作用，因为我不能设置它的样式。当然，你可以设置伪元素的样式！这似乎是一个完美的解决方案！谢谢没问题，很高兴我能帮上忙：）这似乎是一个完美的解决方案！谢谢没问题，很高兴我能帮忙：）
<body>
<div class="element">
</div>
</body>
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; }