HTML部分: <div style="width: 43%"> <img :src="user.avatar" style="height: 100%" > </div> <div class="trapezoid" style="width: 57%"> <div style="background: #eeeeef;height: 40px;line-height: 40px;margin-top: 40px;margin-left: -17px;padding-left: 20px"> <span style="font-size: 18px;font-weight: bold">{{ user.username }} </span> </div> <div style="margin: 10px 18px 10px 0;display: flex;align-items: center;justify-content: flex-end"> <span style="font-size: 14px;font-weight: 500">高级经营顾问</span> <svg-icon icon-class="Position" style="width: 15px;height: 20px;margin-left: 5px" /> </div> <div style="margin: 10px 18px 10px 0; display: flex;align-items: center;justify-content: flex-end"> <span style="font-size: 16px">{{ user.mobileNum }}</span> <svg-icon icon-class="phoneCard" style="width: 15px;height: 20px;margin-left: 5px" /> </div> <div style="margin: 10px 17px 10px -25px;text-align: right;display: flex;align-items: center;justify-content: flex-end"> <span>河南省郑州市*************</span> <svg-icon icon-class="Address" style="width: 30px;height: 20px;margin-left: 5px"/> </div> </div>
css部分:
.box { position: relative; overflow: hidden; width: 370px; height: 200px; display: flex; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); border-radius: 15px; } .box::before { content: ""; position: absolute; top: 0; right: 162px; width: 8px; /* 缺失角的宽度 */ height: 100%; background-color: #bcc5c5; /* 与背景相同的颜色 */ transform-origin: 100% 0; transform: skewX(-14deg); /* 倾斜角度,根据需要调整 */ z-index: 999; } .box::after { content: ""; position: absolute; top: 0; right: 158px; width: 5px; /* 缺失角的宽度 */ height: 100%; background-color: #eeeef0; /* 与背景相同的颜色 */ transform-origin: 100% 0; transform: skewX(-14deg); /* 倾斜角度,根据需要调整 */ z-index: 999; } .trapezoid { position: relative; width: 100%; /* 梯形底部宽度 */ height: 0; /* 高度为0,因为我们使用边框来创建形状 */ border-bottom: 200px solid #FFFFFF; /* 梯形底部边框,设置颜色和高度 */ border-left: 50px solid transparent; /* 梯形左侧边框,透明以形成梯形效果 */ /*border-right: 50px solid transparent;*/ /* 梯形右侧边框,透明以形成梯形效果 */ }