html - 带背景图像的右箭头和重复 x (CSS)

Question

我正在尝试用 CSS 来做这个箭头。它具有与左侧 div 相同的背景图像。是否可以将背景图像添加到三 Angular 形的边框并重复？

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

Working fiddle