투명한 이미지가있는 아래쪽 테두리

Question

투명한 배경을 가진 일종의 텍스트 풍선을 얻고 싶습니다. 그래서 나는이 일을 끝내기 위해 국경을 이용했습니다. 이제 중간에 꼬마 경계선에 작은 화살을 갖고 싶습니다. 그러나 이것을 pseudo ::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; 
}