vue 平行四边形，内容不变形

在Vue.js中，如果你想要创建一个不会变形的平行四边形元素，并保持其内容区域不变形，你可以使用CSS来实现。你可以通过设置`position: relative;`, `width`和`height`属性来定位并控制平行四边形的大小，同时将它的`overflow`属性设为`hidden`来隐藏溢出的内容。

例如，HTML部分可以像这样：

<div class="parallelogram" v-bind:class="{ active: isActive }">
  <div class="content">
    这里是内容
  </div>
</div>

对应的CSS样式可能是这样的：

.parallelogram {
  position: relative;
  width: 200px; /* 设置宽度 */
  height: 100px; /* 设置高度，这会形成一个矩形 */
  overflow: hidden; /* 隐藏超出的部分 */
}

.content {
  position: absolute;
  top: 50%; /* 将内容置于矩形中心 */
  left: 50%;
  transform: translate(-50%, -50%); /* 使用transform调整位置，使其居中 */
}

当`isActive`变量改变时，你可以调整`.parallelogram`的宽高比以创建不同形状的平行四边形，而`.content`的内容始终保持原始尺寸和位置。