HTML+CSS 个人名片制作

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;*/ /* 梯形右侧边框，透明以形成梯形效果 */
}