底部边框透明图像

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

enter image description here

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

我希望它可以像下面的图片：

enter image description here

谢谢。

来源

2014-04-29 Caspert

我想听到的想法，但是......你想过在底部（与4PX边框和箭头透明图像）使用不同的形象？附：完全像你的示例图像，只是透明？） – sinisake

我不明白你。但是，如果我有它的好，你建议为边界底部创建一个图像，在中间有一个箭头和自定义边框？或者你是什么意思？如果我明白你的错误，我很抱歉。 @nevermind – Caspert

最简单的方法是添加另一个元素并使用它覆盖下边框。在下面的例子中，你可以看到我使用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; 
}

来源

2014-04-29 18:27:40

谢谢。只有黑色方块不能透明？ – Caspert

@Caspert正确。如果它是透明的，那么它不会掩盖白色边框。如果你想要一种替代方法，你可以使用'border-image' - https://developer.mozilla.org/en-US/docs/Web/CSS/border-image –

底部边框透明图像

回答

相关问题