梯形切角

<div class="coner-box">
    <div class="top">
      <div class="decorate">
        <div></div>
        <div>
          <div></div>
          <div></div>
        </div>
        <div></div>
      </div>
      <div class="decorate1">
        <div></div>
      </div>
    </div>
    <div class="middle"></div>
    <div class="bottom">
      <div></div>
      <div>
        <div></div>
        <div></div>
      </div>
      <div></div>
    </div>
  </div>

body {
  background-color: #1D4090;
}

.coner-box {
  width: 5rem;
  margin-top: 3rem;
  margin-left: 0.2rem;
  .top {
    .decorate {
      width: 100%;
      height: 0.35rem;
      display: flex;
      align-items: center;
      >div {
        height: 0.35rem;
        &:first-child {
          width: 0.35rem;
          height: 0.35rem;
        }
        &:nth-child(2) {
          display: flex;
          justify-content: space-between;
          flex: 1;
          background-color: #2E5298;
          box-shadow:0 -0.02rem 0.15rem -0.08rem rgba(67,106,174,1);
          >div {
            width: 0.25rem;
            height: 0.48rem;
            background-color: #2E5298;
            &:first-child {
              transform: rotateZ(45deg);
              transform-origin: left top;
              box-shadow:-0.02rem 0 0.15rem -0.08rem rgba(67,106,174,1);
            }
            &:last-child {
              transform: rotateZ(-45deg);
              transform-origin: right top;
              box-shadow:0.02rem 0 0.15rem -0.08rem rgba(67,106,174,1);
            }
          }
        }
        &:last-child {
          width: 0.35rem;
          height: 0.35rem;
        }
      }
    }
    .decorate1 {
      width: 100%;
      height: 0.35rem;
      background-color: #2E5298;
      box-shadow:0px 0 0.15rem rgba(67,106,174,1);
      >div {
        width: 100%;
        height: 100%;
        background-color: #2E5298;
      }
    }
  }
  .middle{
    width: 100%;
    height: 260px;
    background:rgba(27,65,141,1);
    box-shadow:0px 0 0.15rem rgba(67,106,174,1);
  }
  .bottom {
    display: flex;
    align-items: center;
    width: 100%;
    >div {
      background-color: rgba(27,65,141,1);
      &:first-child {
        width: 0.3rem;
        height: 0.3rem;
        background-color: transparent;
      }
      &:nth-child(2) {
        position: relative;
        flex: 1;
        height: 0.3rem;
        border-bottom: 0.01rem solid transparent;
        box-shadow:0px 0.05rem 0.03rem -0.03rem rgba(67,106,174,1);
        >div{
          width: 0.2rem;
          height: 0.5rem;
          background-color: rgba(27,65,141,1);
          &:first-child {
            position: absolute;
            left: 0.05rem;
            bottom: -2px;
            border-left:0.01rem solid transparent;
            transform: rotateZ(-45deg);
            transform-origin: bottom left;
            box-shadow:-0.05rem 0px 0.04rem -0.03rem rgba(67,106,174,1);
          }
          &:last-child {
            position: absolute;
            right: 0.05rem;
            bottom: -2px;
            border-right:0.01rem solid transparent;
            transform: rotateZ(48deg);
            transform-origin: bottom right;
            box-shadow:0.05rem 0px 0.04rem -0.03rem rgba(67,106,174,1);
          }
        }
      }
      &:last-child {
        width: 0.3rem;
        height: 0.3rem;
        background-color: transparent;
      }
    }
  }
}