css实现尖角

首先上效果图：
 

 

<div
      class="select-card-option"
      :class="{ active: item[props.value] === value }"
      v-for="item in options"
      :key="item[props.value]"
      @click="handleSelect(item)"
    >
      <span class="ad-z">◆</span> <span class="ad-y">◆</span>
      <div
        class="checked"
        v-show="item[props.value] === value && showCheckedIcon"
      >
        <i class="icon el-icon-check"></i>
      </div>

      <div class="label">{{ item[props.label] }}</div>
      <div class="desc" v-if="item[props.desc]">{{ item[props.desc] }}</div>

      <slot name="card-item" :data="item"></slot>
    </div>

<span class="ad-z">◆</span> <span class="ad-y">◆</span>
主要就是通过方块叠加形成三角边

 

.select-card-option {
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  border: 1px solid #d4dce9;
  border-radius: 4px;
  margin-right: 8px;
  padding: 16px 16px;
  line-height: 1;
  .ad-z,
  .ad-y {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    display: none;
  }
  .ad-y {
    color: @colorPrimary;
    font-size: 20px;
    bottom: -12px;
    z-index: 1;
  }
  .ad-z {
    color: #fff;
    font-size: 20px;
    bottom: -9px;
    z-index: 3;
  }
  &.active {
    color: @colorPrimary;
    .ad-z,
    .ad-y {
      display: inline-block;
    }
    &::after {
      content: ' ';
      position: absolute;
      top: -2px;
      left: -2px;
      box-sizing: content-box;
      border: 2px solid @colorPrimary;
      border-radius: 4px;
      width: 100%;
      height: 100%;
    }
  }
  .checked {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: @colorPrimary;
    display: flex;
    align-items: center;
    justify-content: center;
    .icon {
      color: #fff;
      font-size: 14px;
      font-weight: bold;
    }
  }

  .desc {
    margin-top: 8px;
  }
}