CSS 삼각형을 위젯 div에 추가하기

Question

위젯 제목이 들어있는 div의 배경 위에 투명한 화살표를 만들고 싶습니다.

원하는 출력 : http://moneyrope.com/ (- - 문제의 위젯 제목 "최신 머니 팁"이 있습니다 이미지가 작동하지 않는 경우

,이 사이트에 위젯 섹션 제목을 볼 수 있습니다 완료 사이트가 아니라 그냥 테스트/준비 환경).

CSS :

.latest-heading { 
 
    background: #53386f none repeat scroll 0 0; 
 
    color: #fff; 
 
    margin-bottom: 2%; 
 
    padding: 2%; 
 
    text-align: center; 
 
}

미리 주셔서 대단히 감사합니다.

Answer 1

이 화살표를 추가하려면 :after 가상 클래스를 사용할 수 있습니다. 여기

은 작업 예입니다

.latest-heading { 
 
    background: #53386f none repeat scroll 0 0; 
 
    color: #fff; 
 
    margin-bottom: 2%; 
 
    padding: 2%; 
 
    text-align: center; 
 
} 
 
.latest-heading:after { 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 20px solid transparent; 
 
    border-right: 20px solid transparent; 
 
    border-top: 20px solid #53386f; 
 
    content: ''; 
 
    position: absolute; 
 
    left: calc(50% - 20px); 
 
    top: 48px; 
 
}

<div class="latest-heading">1</div>