效果图:
实现代码:
<div class="student_icon_three">
<img src="../assets/about-three.webp" alt="" />
</div>
<style>
.student_icon_three {
width: 6%;
height: 100px;
position: absolute;
top: 44%;
left: 40.5%;
}
.student_icon_three:before {
content: "";
height: 70px;
width: 70px;
border: 7px solid #048da0;
display: block;
position: absolute;
top: 2px;
left: 0px;
z-index: 1;
background: #fff;
border-radius: 40px;
-webkit-border-radius: 40px;
-moz-border-radius: 30px;
color: #fff;
text-align: center;
}
.student_icon_three:after {
content: "";
height: 0;
width: 0%;
display: block;
position: absolute;
bottom: -49px;
left: 1px;
border: 10px transparent solid;
border-top-color: #048da0;
border-width: 91px 40px 0px 42px;
}
.student_icon_three img {
width: 55%;
height: 73px;
position: absolute;
top: 5%;
left: 9.5%;
z-index: 1;
}
<style>