底部边框与透明图像

Question

我想得到一种透明背景的文字气泡。所以我用边框来完成这件事。现在我想在中间的底部边缘有一个小箭头。但是当我用伪::after添加它时，边框底部将覆盖透明图像。为了更好地理解，请查看下面的图片。

CSS：

.case-study .testimonial blockquote {
    margin: 60px 0;
    border: 4px solid #FFF;
    text-align: center;
    position: relative;
}
.case-study .testimonial blockquote::after {
    height: 20px;
    width: 20px;
    background: url('../images/blockquote-arrow.png') no-repeat center;
    position: absolute;
    bottom: -14px;
    left: 50%;

    content: "";
    display: block;
}

我希望它可以像下图：

谢谢。

Answer 1

最简单的方法是添加另一个元素并使用它来覆盖底部边框。在下面的示例中，您可以看到我使用CSS三角形而不是图像。 :after伪元素添加白色三角形，:before伪元素是一个较小的黑色三角形，覆盖多余的白色底边。

Example Here

blockquote:after {
    content:'';
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 14px solid #fff;
    position: absolute;
    bottom: -14px;
    left: 50%;
    margin-left: -14px;
}
blockquote:before {
    content:'';
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #000;
    position: absolute;
    bottom: -8px;
    left: 50%;
    margin-left: -8px;
    z-index: 1;
}