CSS-只显示角边框

Question

CSS-只显示角边框

  我想知道是否可以在CSS或jQuery中设置边框，但只用于角落。就像这样：

****                         ****

*                               *

*                               *

             CONTENT

*                               *

*                               *

****                         ****

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}

Answer 2

SVG这是另一个很好的选择，如果您现在想要开始使用向量，以允许很好的响应。<svg viewBox="0 0 100 100" width="50px">  <path d="M25,2 L2,2 L2,25" fill="none" stroke="black" stroke-width="3" />  <path d="M2,75 L2,98 L25,98" fill="none" stroke="black" stroke-width="3" />  <path d="M75,98 L98,98 L98,75" fill="none" stroke="black" stroke-width="3" />  <path d="M98,25 L98,2 L75,2" fill="none" stroke="black" stroke-width="3" /></svg>SVG是一个很好的工具。在这种情况下使用SVG的一些优点是：曲线控制填充控制(不透明度，颜色)笔画控制(宽度，不透明度，颜色)代码量构建和维护形状的时间可伸缩没有HTTP请求(如果使用内联，如示例所示)