相关代码：HTML

<!-- ========================= 4-10 Word_Pic 图文区域 ⬇ ========================= -->

<div class="Word_Pic">
<div class="Word_Pic_1">
<div class="pic">
<img src="./images/b1.jpg" alt="pic1">
</div>
<div class="words">
<div class="triangle1"></div>
<h3>Library</h3>
<p class="p1">
Lorem Ipsum is simply dummy text of the printing <br>
and typesetting industry
</p>
<p class="p2">
Lorem Ipsum has been the industry's standard dummy text ever  <br>
since the 1500s, when an unknown printer took a galley of type <br>
and scrambled it to make a type specimen book.<br>
</p>
<button>EXPLORE</button>
</div>
<div class="pic">
<img src="./images/b2.jpg" alt="pic1">
</div>
<div class="words">
<div class="triangle1"></div>
<h3>Library</h3>
<p class="p1">
Lorem Ipsum is simply dummy text of the printing <br>
and typesetting industry <br>
</p>
<p class="p2">Lorem Ipsum has been the industry's standard dummy text ever  <br>
since the 1500s, when an unknown printer took a galley of type <br>
and scrambled it to make a type specimen book.<br>
</p>
<button>EXPLORE</button>
</div>
</div>
<div class="Word_Pic_2">
<div class="words">
<div class="triangle2"></div>
<h3>Library</h3>
<p class="p1">
Lorem Ipsum is simply dummy text of the printing <br>
and typesetting industry <br>
</p>
<p class="p2">Lorem Ipsum has been the industry's standard dummy text ever  <br>
since the 1500s, when an unknown printer took a galley of type <br>
and scrambled it to make a type specimen book.<br>
</p>
<button>EXPLORE</button>
</div>
<div class="pic">
<img src="./images/b3.jpg" alt="pic1">
</div>
<div class="words">
<h3>Library</h3>
<div class="triangle2"></div>
<p class="p1">
Lorem Ipsum is simply dummy text of the printing <br>
and typesetting industry <br>
</p>
<p class="p2">Lorem Ipsum has been the industry's standard dummy text ever  <br>
since the 1500s, when an unknown printer took a galley of type <br>
and scrambled it to make a type specimen book.<br>
</p>
<button>EXPLORE</button>
</div>
<div class="pic">
<img src="./images/b4.jpg" alt="pic1">
</div>
</div>

</div>

相关代码：CSS

/*============================== 4-10 Word_Pic 图文区域 ⬇ ================================*/
.Word_Pic{
width: 100%;
margin:0 auto;
}
.Word_Pic .Word_Pic_1{
overflow: hidden;
}
.Word_Pic .Word_Pic_2{
overflow: hidden;
}
.Word_Pic .pic{
float: left;
width: 25%;
height: 380px;       /*Q1:这里可以不设置高吗？*/
}
.Word_Pic .pic img{       /*Q2:图片这里的显示效果有点问题，视窗缩小70%以下的时候，图片右侧有空*/
display: block;
width: 100%;
}
.Word_Pic .words{
float: left;
width: 25%;
height: 380px;
background: #07cbc9;
position: relative;
}
.Word_Pic .words h3{
font-size: 24px;
color: white;
padding:20px 0 20px 20px;
}
.Word_Pic .words .p1{
padding: 10px 20px;
color: white;
font-size: 16px;
}
.Word_Pic .words .p2{
padding: 10px 20px;
color: gray;
font-size: 14px;
}
.Word_Pic .words button{    /*Q3：button是行内块元素吗？行内元素可以设置宽高的就是行内块吧*/
display:block;
width: 138px;
height: 40px;
background: #000;
color: white;
line-height: 40px;
text-align: center;
border: none;
margin:0 auto;
margin-top: 20px;
}

/*这里是三角形的位置*/
.Word_Pic .words .triangle1{     /*左边三角形*/
/*居中对齐*/
position:absolute;
left: -40px;
top: 50%;
margin-top: -20px;
/* 三角形 */
width: 0px;
height: 0px;
border:20px solid transparent;
border-right-color:#07cbc9;
}
.Word_Pic .words .triangle2{     /*右边三角形*/
/*居中对齐*/
position:absolute;
right: -40px;
top: 50%;
margin-top: -20px;
/* 三角形 */
width: 0px;
height: 0px;
border:20px solid transparent;
border-left-color:#07cbc9;
}

问题描述：

效果已经实现，麻烦老师看下css样式部分有需要优化的吗？

相关截图：

麻烦了～