1

image.png

image.png

查看全部 3 个回答

1
.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
这样你看可以么

推广链接