CSS图像箭头重叠

Question

我从一位看似简单的设计师那里得到了一个设计，但在构建它时，结果却并非那么简单...... 我发现了许多创建CSS3箭头的方法，这正是我所需要的，但它需要将图像作为填充颜色才能与底层div重叠。

如您所见，图像与下一部分重叠。最棘手的部分是它是图像滑块的一部分。这意味着我不能只剪切图像中的箭头，因为图像会滑动。所以我猜需要某种叠加效果吗？

正在使用的滑块为Whoothemes' flexslider，宽度为100％。

我希望你们能帮助我！

Answer 1

您应该向该图像父项添加两个元素（可能：之前和之后）。

.arrow-down
{
   position: relative;
   text-align: center;
}

.arrow-down:after,
.arrow-down:before
{
    position: absolute;
    content: "";
    background-color: transparent;
    display: block;
    height: 30px;
}
/* left part */
.arrow-down:before
{
    left: 0;
    right: 50%; 
    bottom: 0px;
    border-bottom: 38px solid red;
    border-left: 0 none hsla(0, 0%, 0%, 0);
    border-right: 60px inset hsla(0, 0%, 0%, 0);
}

/*right part*/
.arrow-down:after
{
    right: 0;
    left: 50%; 
    bottom: 0px;
    border-bottom: 38px solid red;
    border-right: 0 none hsla(0, 0%, 0%, 0);
    border-left: 60px inset hsla(0, 0%, 0%, 0);
}

查看实际操作：http://fiddle.jshell.net/usz62/ 肯定需要一些调整。