我试图用CSS做这个箭头。它具有与左div相同的背景图像。是否可以将背景图像添加到三角形的边框并重复它?
答案 0 :(得分:1)
我的问题
<强> HTML 强>
<div class="left">Left Div</div>
<div class="arrow-right"></div>
<div class="right">Right Div</div>
.left, .right, .arrow-right {
display:inline-block;
}
<强> CSS 强>
.left {
background-color: #b6b6b6;
line-height: 32px;
margin: 0;
padding-right: 0;
padding-top: 8px;
vertical-align: top;
padding-left:10px;
}
.right {
background-color: rgba(0, 0, 0, 0.2);
line-height: 36px;
margin-left: -24px;
padding-left: 35px;
padding-right: 5px;
padding-top: 4px;
vertical-align: top;
}
.arrow-right {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
margin-left:-4px;
border-left: 20px solid #e4e4e4;
}