css實現中括號邊框

要求：css + div 實現中括號邊框

一、實現方式

    .square_brackets {
      border: none;
      position: relative;
      padding: 0;
      height: 130px;
      width: 400px;
    }

    .square_brackets:before,
    .square_brackets:after {
      content: '';
      display: block;
      height: 100%;
      width: 15px;
      border: 3px solid #979797;
      position: absolute;
      top: -2px;
    }

    .square_brackets:before {
      left: 0;
      border-right: 0;
    }

    .square_brackets:after {
      right: 0;
      border-left: 0;
    }

    .triangle {
      width: 0;
      height: 0;
      border: 10px solid;
      border-color: transparent #979797 transparent transparent;
      position: absolute;
      left: -17px;
      top: 50px;
    }

 

二、效果圖

 

 

三、完整代碼

完整代碼下載