CSS
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
list-style: none;
font-family: 'Noto Sans TC', sans-serif;
}
html, body {
height: 100%;
}
body {
display: flex;
align-content: center;
background-color: #003;
}
.wrap {
width: 1200px;
display: flex;
margin: auto;
}
.item {
width: 370px;
margin: 15px;
text-align: center;
background-color: #fff;
border: 1px solid #ccc;
transform: translateY(0px);
transition: .5s;
}
.item img {
width: 100%;
vertical-align: middle;
}
.item h2 {
border-bottom: 1px solid #888;
padding-bottom: .3em;
margin-bottom: .4em;
font-weight: 900;
transition: .25s;
}
.item p {
line-height: 1.6;
font-weight: 300;
transition: .25s;
}
.item .txt {
padding: 20px;
position: relative;
}
.item .txt::before {
content: '';
width: 0;
height: 0;
position: absolute;
top: 0;
left: 0;
border-top: 50px solid transparent;
border-left: 184px solid #fff;
border-right: 184px solid #fff;
transform: translateY(-100%);
}
.item:hover {
transform: translateY(-50px);
}
.item:hover .txt {
background-image: linear-gradient(0deg, #fb8076, #feb85d);
}
.item:hover .txt::before {
border-left: 184px solid #feb85d;
border-right: 184px solid #feb85d;
}
.item:hover h2 {
color: #fff;
border-bottom-color: #fff;
}
.item:hover p {
color: #fff;
}
</style>
HTML
<div class="wrap">
<div class="item">
<img src="https://picsum.photos/300/300?ramdom=10">
<div class="txt">
<h2>校長</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe ipsum ad consectetur dolorem dolores voluptatem odio provident, labore? Nobis, quibusdam. Cum, necessitatibus eos sit sunt doloribus. Natus praesentium beatae odit.</p>
</div>
</div>
<div class="item">
<img src="https://picsum.photos/300/300?ramdom=20">
<div class="txt">
<h2>主任</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe ipsum ad consectetur dolorem dolores voluptatem odio provident, labore? Nobis, quibusdam. Cum, necessitatibus eos sit sunt doloribus. Natus praesentium beatae odit.</p>
</div>
</div>
<div class="item">
<img src="https://picsum.photos/300/300?ramdom=30">
<div class="txt">
<h2>老師</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe ipsum ad consectetur dolorem dolores voluptatem odio provident, labore? Nobis, quibusdam. Cum, necessitatibus eos sit sunt doloribus. Natus praesentium beatae odit.</p>
</div>
</div>
</div>
最後奉上 CSScoke 的影片教學
