在 CSS 中创建角边框

Question

如何在 CSS 中创建 "blue" 和 "orange" 角，如下图所示：

谢谢

Answer 1

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

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;
}

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

Answer 2

试试这个

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;
        }

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

Answer 3

如果您要使用 'before' 和 'after' 元素，则只需要一个 HTML 标记，即。在本例中是最外层的 div 并调用此元素的前后元素。额外的标签会增加渲染器负载。

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>

在 CSS 中创建角边框

Create corner border in CSS

html

css

border