CSS 裁剪 斜线

<template>
  <div class="container">
	<div class="top">
        <div class="content">
        </div>
        <div class="num">1</div>
     </div>
  </div>
</template>
<style lang="less" scoped>
.container {
  .title {
    font-size: 24px;
    font-weight: bold;
  }
  .top {
    width: 380px;
    height: 100px;
    border-radius: 5px;
    /*background-color: #ec4141;*/
    position: relative;
    /*-webkit-clip-path: polygon(100% 1%, 100% 100%, -15% 100%, 12% 0%);*/
    .content {
      height: 100px;
      width: 380px;
      border-radius: 5px;
      background-color: #fafafa;
      -webkit-clip-path: polygon(100% 0%, 100% 100%, -15% 100%, 12% 0%);
    }
    &:hover .content {
      background-color: #e1e2e3;
    }
    .num {
      position: absolute;
      left: 0;
      top: 0;
      width: 20px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      font-size: 24px;
      color: #ec4141;
    }
  }
  &:hover .top {
    background-color: #f0f1f2;
    border-radius: 5px;
  }
}
</style>

效果图：