H5+svg 实现左边图片右边文字描述的梯形微名片

先上效果图

源码分享

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css实现div边框斜角</title>
<style type="text/css">
.labels {
display: inline-block;
display: inline-flex;
color: #fff;
/*line-height: 22px;*/
}
html body{
height: 100%;
width: 100%;
}
.label {
display: inline-block;
text-align: center;
}

.label.port {
background-color: #636F80;
width: 180px;
}

.label.port::before {
border-top: 11px solid transparent;
border-right: 5px solid #636F80;
border-bottom: 11px solid #636F80;
border-left: 5px solid transparent;
}

.label + .label {
position: relative;
z-index: 3;
}

.label + .label .triangle {
width: 180px;
height: 180px;
position: absolute;
right: 100%;
top: 0;
margin-right: -62.3px;
}
p{
   font-size: 3px;
   height: 4px;
}
</style>
</head>
<body>
<div class="labels">

<img class="label" src="./img/me.jpg" width="150px" height="180px">

<span v-if="row.url" class="label port" style="height:180px">
<svg class="triangle" viewBox="0 0 1024 1024" xmlns:xlink="http://www.w3.org/1999/xlink">
<path style="fill: #636F80;" d="M679.563636 2.771938h7.345635l-7.345635 1021.228062H336.443943z" />
</svg>
<div>
   <p>张三</p>
   <p>济南农商银行</p>
   <p>电话：18706464506</p>
   <p>济南农商银行</p>
</div>
</span>
</div>
</body>
</html>