Добавление треугольника 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>