通过CSS的clip-path属性绘制菱形梯形

    <div class="condition-node">
        <div class="condition-node-inner"></div>
        <span class="condition-node-label">Condition</span>
      </div>
      <div class="switch-node">
        <div class="switch-node-inner"></div>
        <span class="switch-node-label">switch</span>
      </div>

   .condition-node {
      width: 200px;
      height: 30px;
      background-color: #9013FE;
      margin-top: 12px;
      margin-bottom: 10px;
      clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
      position: relative;
      cursor: pointer;

      .condition-node-inner {
        width: 200px;
        height: 30px;
        background-color: #F3E7FE;
        clip-path: polygon(50% 5%, 95% 50%, 50% 95%, 5% 50%);
        cursor: pointer;
      }

      .condition-node-label {
        font-weight: bold;
        position: absolute;
        top: 28%;
        left: 36%;
        cursor: pointer;
      }
    }

    .switch-node {
      width: 200px;
      height: 30px;
      background-color: #666;
      clip-path: polygon(0 100%, 20% 0, 80% 0, 100% 100%);
      position: relative;
      cursor: pointer;

      .switch-node-inner {
        width: 200px;
        height: 30px;
        background-color: #FCF7BA;
        clip-path: polygon(2% 95%, 20% 5%, 80% 5%, 98% 95%);
        cursor: pointer;
      }

      .switch-node-label {
        font-weight: bold;
        cursor: pointer;
        position: absolute;
        top: 30%;
        left: 40%;
      }
    }