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

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

1 <div class="trapezoid"></div>
1 .trapezoid {
2   width: 100px;
3   height: 0;
4   border-top: 50px solid blue;
5   border-right: 25px solid transparent;
6   border-left: 25px solid transparent;
7 }

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

复制代码
 1 <template>
 2     <div>
 3       <div class="trapezoid1">
 4         <div class="text">FB</div>
 5         <div class="trapezoid"></div>
 6       </div>
 7     </div>
 8 </template>
 9 <script>
10 export default {
11   data() {
12     return {
13     };
14   },
15   components: {},
16   methods: {
17   },
18   created() {},
19   mounted() {}
20 };
21 </script>
22 <style>
23 .trapezoid1 {
24   width: 150px;
25   height: 0;
26   border-top: 50px;
27   border-right: 25px solid transparent;
28   border-left: 25px solid transparent;
29   position: relative; /* 相对定位 */
30 }
31 .trapezoid {
32   width: 150px;
33   height: 0;
34   border-top: 50px solid rgba(28, 50, 135, 0.5);
35   border-right: 25px solid transparent;
36   border-left: 25px solid transparent;
37   position: relative; /* 相对定位 */
38 }
39 .text {
40   position: absolute; /* 绝对定位 */
41   top: 100%; /* 调整文本位置 */
42   left: 50%; /* 调整文本位置 */
43   font-size: 200%;
44 }
45 </style>
复制代码