如何仅显示角边框？

Question

我想知道是否可以在 CSS 中制作边框但仅用于角落。像这样的东西：

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

             CONTENT

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

原文由 pierreaurelemartin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

假设 <div id="content">CONTENT</div> 和 CONTENT 至少包含一个 HTML 节点。

 #content {position:relative}
#content:before, #content:after, #content>:first-child:before, #content>:first-child:after {
    position:absolute; content:' ';
    width:80px; height: 80px;
    border-color:red; /* or whatever colour */
    border-style:solid; /* or whatever style */
}
#content:before {top:0;left:0;border-width: 1px 0 0 1px}
#content:after {top:0;right:0;border-width: 1px 1px 0 0}
#content>:first-child:before {bottom:0;right:0;border-width: 0 1px 1px 0}
#content>:first-child:after {bottom:0;left:0;border-width: 0 0 1px 1px}

这是一个 小提琴

原文由 Niet the Dark Absol 发布，翻译遵循 CC BY-SA 3.0 许可协议