在CSS中创建角落边框

Question

如何创建＆＃34; blue＆＃34;和＆＃34;橙＆＃34; CSS中的角落，如下图所示：

由于

Answer 1

您可以使用:before和:after这样的伪类：

＆＃13;

＆＃13;

div {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 20px;
    border: 1px solid #000;
}

div:after {
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: -5px;
    right: -5px;
    border-top: 3px solid blue;
    border-right: 3px solid blue;
}
span:before {
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: -5px;
    left: -5px;
    border-bottom: 3px solid orange;
    border-left: 3px solid orange;
}

＆＃13;

<div><span></span></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个

＆＃13;

＆＃13;

div{
      box-sizing:border-box;
    }

    div.outer{
          height:150px;
          width:150px;
          position:relative;
          background:#fff;
          padding:2px;
        }
       div.inner {
                border:1px solid #d6d6d6;
                 height:100%;
          width:100%;
        }
        div.outer:before{
          content:"";
          background:#F87200;
          width:25px;
          height:25px;
          position:absolute;
          bottom:-5px;
          left:-5px;
          display:block;
          z-index: -1;
        }
        div.outer:after{
          content:"";
          background:#0092D4;
          width:25px;
          height:25px;
          position:absolute;
          top:-5px;
          right:-5px;
          display:block;
          z-index: -1;
        }

＆＃13;

    <div class="outer">
      <div class="inner"></div>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

如果您要使用'before'和'after'元素，则只需要一个HTML标记，即。在这种情况下，最外层的div调用此元素的before和after元素。额外的标签会在渲染器加载时累加。

div {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 20px;
  border: 1px solid #bbb;
}

div:after {
  display: block;
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  top: -5px;
  right: -5px;
  border-top: 3px solid blue;
  border-right: 3px solid blue;
}

div:before {
  display: block;
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: -5px;
  left: -5px;
  border-bottom: 3px solid red;
  border-left: 3px solid red;
}

<div></div>