transform: skew(-20deg); /* 设置倾斜角度 */
  overflow: hidden; /* 隐藏超出容器的部分 */ 

<template>
  <div class="parallelogram">
    <div class="parallelogram__content">
      <!-- 这里放置您的内容 -->
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'Parallelogram'
  // 其他选项...
}
</script>
 
<style scoped>
.parallelogram {
  width: 200px; /* 设置宽度 */
  height: 100px; /* 设置高度 */
  transform: skew(-20deg); /* 设置倾斜角度 */
  overflow: hidden; /* 隐藏超出容器的部分 */
}
 
.parallelogram__content {
  transform: skew(20deg); /* 修正内容的倾斜 */
  width: 100%; /* 设置内容宽度 */
  height: 100%; /* 设置内容高度 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}
</style>