只有拐角的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;
        }
      }
    }