效果1:
triangle为三角形结构
<div class="carousel">
<div class="businessBox" @mouseenter="moreEnter(i)" @mouseleave="moreLeave(i)" v-for="(item, i) in navList"
:key="i + item.src" @click="toChangeTabs(item, i)">
<div style="height:100%" :class="{ colorLineHeight: item.id == moduleId }">
<div class="triangle" v-if="item.id == moduleId"></div>
<div class="businessBox_content">
<img :src="item.isChangeHeight ? item.hoverSrc : item.src" alt="" :key="imgNum" />
<h3 class="title" :class="{ colorfont: item.id == moduleId }" style="text-align:center">
{{ $store.state.isChinese ? item.name : item.nameEn }}
</h3>
<h4 :class="{ colorfont: item.id == moduleId }" style="text-align:center">
{{ $store.state.isChinese ? item.summary : item.summaryEn }}
</h4>
</div>
</div>
</div>
</div>
.carousel {
min-width: 1200px;
position: relative;
width: 100%;
height: 280px;
display: flex;
background: #ebebeb;
.businessBox {
display: inline-block;
position: relative;
height: 100%;
width: 25%;
border-right: 1px solid #e0e0e0;
cursor: pointer;
.businessBox:last-child {
border-right: none;
}
.businessBox_content {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
padding: 50px;
height: 100%;
img {
width: 80px;
height: 80px;
}
.title {
font-size: 26px;
font-weight: normal;
color: #333333;
margin-top: 30px;
width: 230px;
}
h4 {
font-size: 16px;
color: #666666;
margin-top: 20px;
}
ul {
position: relative;
height: 0px;
overflow: hidden;
margin-top: 30px;
li {
width: 280px;
height: 50px;
border-bottom: 1px solid #fff;
text-align: center;
line-height: 50px;
color: #ffffff;
}
li:first-child {
background: #ffffff;
opacity: 0.75;
color: #0092df;
}
li:last-child {
border-bottom: none;
}
}
.more {
margin-top: 60px;
width: 140px !important;
height: 50px !important;
border: 1px solid #0092df !important;
opacity: 1;
border-radius: 80px;
color: #0092df;
line-height: 50px;
text-align: center;
cursor: pointer;
}
}
}
.businessBox:hover {
background-color: #ddd;
}
.triangle {
left: 50%;
margin-left: -13px;
bottom: -40px;
position: absolute;
box-sizing: border-box;
width: 26px;
height: 12px;
border: 20px solid;
border-color: rgba(3, 124, 183, 0.9) transparent transparent transparent;
}
}
效果2:
triangle为三角形结构:
.triangle {
right: -17px;
bottom: 10px;
transform: rotate(-90deg);
position: absolute;
box-sizing: border-box;
width: 20px;
height: 20px;
border: 10px solid;
border-color: rgba(190, 0, 17, 1) transparent transparent
transparent;
}
效果3:
triangle3为三角形结构(直角三角形)
.triangle1 {
left: -21px;
// bottom: 0;
top: 20px;
transform: rotate(-90deg);
position: absolute;
box-sizing: border-box;
width: 0;
height: 0;
border-top: 40px solid white;
border-left: 80px solid transparent;
transform: rotate(-90deg);
}