3 个回答
.card {
      width: 130px;
      height: 50px;
      border-radius: 10px;
      position: relative;
      overflow: hidden;
    }
    .left,.right {
      width: 50px;
      height: 0;
      top: 0;
      display: block;
      color:  #fff;
      position: absolute;
    }
    .left::after,
    .right::after {
      width: 100%;
      line-height: 50px;
      position: absolute;
      text-align: center;
    }
    .left {
      left: 0;
      border-top: 50px solid red;
      border-right: 20px solid transparent;
    }
    .left::after {
      top: -50px;
      content: '左边';
    }
    .right::after {
      top: 0;
      content: '右边';
    }
    .right {
      right: 0;
      border-bottom: 50px solid #000;
      border-left: 20px solid transparent;
    }

<div class="card">
  <div class="left"></div>
  <div class="right"></div>
</div>

FDT31RN)J9Q@3VV{VCO8%OV.png
这样你看可以么

    如果是静态的的话就用伪类(afetr before)去写 ,如果是动态的但是用定位(position:absoult)去写!

      一般都用绝对定位吧

        撰写回答

        登录后参与交流、获取后续更新提醒