css 实现各种图像

实现横向的矩形加三角形的拼接

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;
}