SOURCE

<div class="list_box">
      <div class="li" >
        <div class="head_img_box">
          <img src="https://cdn.seovx.com/d/?mom=302" mode="aspectFill" class="head_img">
        </div>
        <div class="info_box">
          <div class="name">刘22</div>
          <div class="desc">2222222222222222222</div>
        </div>
      </div>
      <div class="li" >
        <div class="head_img_box">
          <img src="https://api.nmb.show/1985acg.php" mode="aspectFill" class="head_img">
        </div>
        <div class="info_box">
          <div class="name">谢一一</div>
          <div class="desc">1111111111111</div>
        </div>
      </div>
    </div>

    <div class="copyright">来源<a href="https://www.xiedandan.com/post-24.html" target="_blank"  >https://www.xiedandan.com/post-24.html</a></div>

.list_box {
  padding: 20px 10px;
}
  .li {
    width: 701px;
    height: 292px;
    background: #ffffff;
    box-shadow: 0px 1px 8px 3px rgba(0, 0, 0, 0.04);
    border-radius: 28px;
    font-size: 22px;
    font-weight: bold;
    color: #6c6c6c;
    box-sizing: border-box;
    padding: 63px 0 0 336px;
    position: relative;
    margin-bottom: 35px;
   
  }
   .desc {
      line-height: 40px;
      white-space: pre-wrap;
    }
    .name {
      font-size: 57px;
      color: #000000;
    }
    .head_img_box {
      position: absolute;
      width: 340px;
      height: 310px;
      overflow: hidden;
      top: -9px;
      left: 0;
      border-radius: 28px 0 0 28px;
      /* //这是使用clip-path剪切掉多余的部分 */
      clip-path: polygon(0 0, 0 0, 100% 0, 100% 0, 280px 100%, 0 100%); 
    
    }
      .head_img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border: 3px solid #000;
      }