效果:

<template>

  <div

    class="title"

    :style="{

      background: afterBackground

    }"

  >

    <div

      class="main text-over"

      :style="{

        color: color,

        height: height + 'px',

        lineheight: height + 'px',

        background: mainBackground

      }"

      >十里桃花

    </div>

    <div

      class="after"

      :style="{

        marginTop: -(computedHeight - height) + 'px',

        height: computedHeight + 'px',

        width: computedHeight + 'px',

        background: afterBackground

      }"

    ></div>

  </div>

</template>

 

<script>

export default {

  name: 'HelloWorld',

  props: {

    // 标题高度

    height: {

      type: String,

      default: '72'

    },

    // 字体

    color: {

      type: String,

      default: '#fff'

    },

    // 标题背景

    mainBackground: {

      type: String,

      default: `linear-gradient(

      180deg,

      rgba(9, 189, 198, 0.1) 0%,

      rgba(9, 189, 198, 0.2) 100%)`

    },

    // 主背景

    afterBackground: {

      type: String,

      default: `linear-gradient(

      180deg,

      rgba(1, 21, 31, 1) 0%,

      rgba(1, 14, 21, 1) 100%)`

    }

  },

  computed: {

    computedHeight() {

      return Math.sqrt(this.height * this.height * 2)

    }

  },

  data() {

    return {

      msg: 'Welcome to Your Vue.js App',

      img: null

    }

  },

  methods: {},

  mounted() {}

}

</script>

 

<style scoped>

.title {

  display: flex;

  overflow: hidden;

}

.main {

  font-size: 34px;

  padding: 12px 84px 10px 37px;

  box-sizing: border-box;

  border: 1px solid #09bdc6;

}

.after {

  box-sizing: border-box;

  transform-origin: left bottom;

  transform: rotate(-45deg);

  border: 1px solid #09bdc6;

  border-right-color: transparent;

  border-top-color: transparent;

  border-bottom-color: transparent;

}

.text-over {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}

</style>