纯CSS绘制左连接、右连接、内连接、全连接的小圆

一、效果

 二、实现

<template>
  <div :class="$style.jointIcon">
    <div
      :class="[
        $style.jointIconLeft,
        leftFill && $style.fillColor,
        leftFill && $style.level,
      ]"
    ></div>
    <div
      :class="[
        $style.jointIconRight,
        rightFill && $style.fillColor,
        { [$style.level]: rightLevel },
      ]"
    ></div>
    <div :class="$style.oval" v-if="type === JointType.Intersection"></div>
  </div>
</template>
<script>
import { Component, Vue, Prop } from 'vue-property-decorator';
import { JointType } from '@/views/data-flow-design/data/utils/enum';

@Component()
export default class JointIcon extends Vue {
  /**@name 连接类型 */
  @Prop({ type: String, default: 'ALL' }) type;

  JointType = JointType;

  /**@name 左圆填充颜色 */
  get leftFill() {
    if (this.type === JointType.All || this.type === JointType.Left)
      return true;
    return false;
  }
  /**@name 右圆填充颜色 */
  get rightFill() {
    if (this.type === JointType.All || this.type === JointType.Right)
      return true;
    return false;
  }
  /**@name 右圆层级高 */
  get rightLevel() {
    if (this.type === JointType.Right) return true;
    return false;
  }
}
</script>
<style lang="less" module>
.jointIcon {
  position: relative;
  width: 36px;
  height: 22px;
}
.jointIconLeft {
  position: absolute;
  top: 0px;
  left: 0px;
  display: inline-block;
  width: 22px;
  height: 22px;
  background-color: var(--btn-border);
  box-shadow: 0 0 1px 0.5px var(--btn-border);
  border-radius: 50px;
  z-index: 1;
}

.jointIconRight {
  display: inline-block;
  top: 0px;
  left: 14px;
  width: 22px;
  height: 22px;
  background-color: var(--btn-border);
  border-radius: 50px;
  position: absolute;
  z-index: 1;
}
.level {
  z-index: 999;
}
.oval {
  display: inline-block;
  position: absolute;
  top: 5px;
  left: 12px;
  width: 12px;
  height: 12px;
  background-color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 12px 0px;
  transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  z-index: 999;
}
.fillColor {
  background-color: var(--primary);
}
</style>