vue 绘制平行四边形样式
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>原文地址：https://blog.csdn.net/weixin_46041137/article/details/142825358
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！