关于css:只有拐角的css样式

如图下图

html 代码

<div class="corner-box">    <div class="corner-top"></div>    <div class="corner-bottom"></div>    <p>预警次数TOP6指标散布</p></div>

css 代码

    .corner-box {      float: left;      cursor: pointer;      user-select: none;      width: 190px;      height: 35px;      line-height: 35px;      font-size: 16px;      position: relative;      padding-left: 10px;      background-color: #ecf8ff;      @corner-width: 8px;      @corner-height: 8px;      @corner-border: 1px solid #43bafe;      @corner-fix: -4px;      .corner-base() {        content: '';        position: absolute;        width: @corner-width;        height: @corner-height;        border: @corner-border;      }      .corner-top {        &::before {          .corner-base();          left: @corner-fix;          top: @corner-fix;          border-bottom: none;          border-right: none;        }        &::after {          .corner-base();          right: @corner-fix;          top: @corner-fix;          border-bottom: none;          border-left: none;        }      }      .corner-bottom {        &::before {          .corner-base();          left: @corner-fix;          bottom: @corner-fix;          border-top: none;          border-right: none;        }        &::after {          .corner-base();          right: @corner-fix;          bottom: @corner-fix;          border-top: none;          border-left: none;        }      }    }