实现横向的矩形加三角形的拼接
html
<!-- 窗口电话,我要举报,后来了能扩展为轮播 -->
<div class="x_scroll_lab">
<ul>
<li v-for="item in bottomList">
<div class="wapperList" :style="item.node">
<div class="title">
<span class="rectangle">{{item.name}}</span>
<span class="triangle</span>
</div>
</div></li>
</ul>
</div>
css
/*底1/2排列的开始*/
.x_scroll_lab{
width: 100%
}
.x_scroll_lab ul {
display: flex;
padding: 20px 10px 0px 10px;
}
.x_scroll_lab ul li{
flex:1;
margin-right: 5px;
}
.x_scroll_lab ul li:last-child{
margin-right: 0px;
}
.x_scroll_lab ul li .wapperList{
position: relative;
height:100px;
background-repeat: no-repeat;
background-size:100% 100px;
}
.x_scroll_lab ul li .wapperList div.title{
position: absolute;
top: 50%;
transform: translateY(-50%);
display:flex;
/*letter-spacing: -4px;*/
}
.x_scroll_lab ul li .wapperList div.title span{
}
/* 我采用的是一个矩形和一个三角形的拼接的方法*/
/*矩形*/
.x_scroll_lab ul li .wapperList div.title .rectangle{color: #fff;
background-color: #1492FF;
padding:5px;
/*border:none;*/
margin-right: 0px;
display: inline-block;
/*transform: translateX(0.3px);*/
}
/*
三角形
利用的是边框的原理当高度为0的时候,设置边框的高度就是一个"老包"的形状,单个则为三角形的形状
*/
.x_scroll_lab ul li .wapperList div.title .triangle{width: 0px;
height:0px;
display: inline-block;
border-bottom: 14px solid transparent;
border-left: 14px solid #1492FF;
border-top: 14px solid transparent; /*要形成上面的三角形,需要设置上面这条边有颜色,左边和右边透明*/
border-right: 14px solid transparent;
}