html橫向圖畫法

 

 

 

 

 

豎向的改下before

.aa1 {
  // min-width: 1360px;
  margin-left: 50px;
  margin-top: 50px;
  margin-bottom: 50px;
  text-align: center;
  .aa2 {
    // word-break:break-all;
    // word-wrap:break-word;
    border-radius: 25px;
    position: relative;
    // display: inline-block;
    background: white;
    // background: rgb(180, 229, 237);
    margin-bottom: 50px;
    height: 60px;
    width: 220px;
    // width: 18vh;
    text-align: center;
    line-height: 50px;
    border: 1px solid #d3d7d4;
  }
  .aa3 {
    &::before{
      position: absolute;
      content: "";
      // width: 190px;  // == right
      height: 90px;  // == right
      right: 50%;
      // top: 50%;
      bottom: -90px;
      // margin-left: 30px;
      border-right: 1px solid #75767e;
      // border-top: 1px solid #75767e;
      // display: inline-block;
    }
    // &::before{
    //   position: absolute;
    //   content: "";
    //   width: 60px;  // == right
    //   top: 50%;
    //   right: -60px;
    //   // margin-left: 30px;
    //   border-top: 1px solid #75767e;
    //   display: inline-block;
    // }
  }
  .NOT_EXECUTED {
    background: white;
  }
  .SUCCESS {
    // background: #e5ffe5;
    background: #b9f2b9;
  }
  .FAILED {
    background: #f8d2d2;
  }
}