vue 用css画一个梯形

在工作中，有时候做前端会用到梯形，ui组件库里没有，这就需要我们用css来实现。

1、第一种需求是只生成梯形，不填充文字的。

<div class="trapezoid"></div>

.trapezoid {
  width: 100px;
  height: 0;
  border-top: 50px solid blue;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
}

2.第二种需求的是，你需要在这个梯形里面填写文字的 

<template>
    <div>
      <div class="trapezoid1">
        <div class="text">FB</div>
        <div class="trapezoid"></div>
      </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
    };
  },
  components: {},
  methods: {
  },
  created() {},
  mounted() {}
};
</script>
<style>
.trapezoid1 {
  width: 150px;
  height: 0;
  border-top: 50px;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  position: relative; /* 相对定位 */
}
.trapezoid {
  width: 150px;
  height: 0;
  border-top: 50px solid rgba(28, 50, 135, 0.5);
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  position: relative; /* 相对定位 */
}
.text {
  position: absolute; /* 绝对定位 */
  top: 100%; /* 调整文本位置 */
  left: 50%; /* 调整文本位置 */
  font-size: 200%;
}
</style>