先贴图:
做项目要实现这样一个效果,第一眼一看很简单用三角形实现,但外面有一层边框,所以需要两个三角形来实现这样的效果。
html:
<div class="ans clearfix">
<img src="../../images/avatar.png" alt="">
<p class="a_txt">
绑卡放款了,说明借贷关系已成立你注销银行卡也没有用,借款指向的是你个人。
<i class="triangle">
<span></span>
</i>
</p>
</div>
此处css用的sass 的语法来写的:
.ans {
img {
float: left;
margin-top: 10rem/$const;
border-radius: 50%;
}
p {
float: left;
position: relative;
width: 392rem/$const;
height: 116rem/$const;
border: 1px solid #ddd;
margin-left: 34rem/$const;
padding-top: 32rem/$const;
padding-bottom: 32rem/$const;
padding-left: 28rem/$const;
padding-right: 28rem/$const;
border-radius: 20rem/$const;
background: $white;
font-size: 30rem/$const;
.triangle {
position: absolute;
top: 46rem/$const;
left: -32rem/$const;
width: 0;
height: 0;
border-width: 16rem/$const;
border-style: solid;
border-color: transparent #ddd transparent transparent;
span {
position: absolute;
top: -15rem/$const;
left: -14rem/$const;
width: 0;
height: 0;
border-width: 15rem/$const;
border-style: solid;
border-color: transparent $white transparent transparent;
}
}
}
}