element里的步骤条做成步骤1是直线向右步骤2是直线旋转90度向下步骤3直线向左的案例

要实现这个效果，可以通过自定义每个步骤的插槽，来修改每个步骤的样式。具体步骤如下：

1. 在Vue组件中引入Steps组件。

<template>
  <div>
    <el-steps :active="active" finish-status="success">
      <el-step title="步骤1">
        <template #title>
          <span class="step-title">步骤1</span>
          <span class="step-line"></span>
        </template>
      </el-step>
      <el-step title="步骤2">
        <template #title>
          <span class="step-title">步骤2</span>
          <span class="step-line" style="transform: rotate(90deg);"></span>
        </template>
      </el-step>
      <el-step title="步骤3">
        <template #title>
          <span class="step-title">步骤3</span>
          <span class="step-line" style="transform: rotate(180deg);"></span>
        </template>
      </el-step>
    </el-steps>
  </div>
</template>

<script>
import { Steps, Step } from 'element-ui';

export default {
  components: {
    Steps,
    Step,
  },
  data() {
    return {
      active: 1,
    };
  },
};
</script>

<style scoped>
.step-title {
  margin-right: 10px;
}

.step-line {
  display: inline-block;
  width: 20px;
  height: 2px;
  background-color: #909399;
  vertical-align: middle;
}
</style>

2. 设置Steps组件的active属性来控制当前激活的步骤。

3. 使用自定义插槽来修改每个步骤的样式，添加一个span元素作为步骤标题，再添加一个span元素作为步骤之间的连线，并通过transform属性来控制连线的旋转角度。

通过以上步骤，就可以实现步骤1是直线向右、步骤2是直线旋转90度向下、步骤3直线向左的效果了。