Как сделать такой блок?

подскажите,как сделать такой блок в верху с косым border
https://codepen.io/anon/pen/rmEbqE вот что пока получается

в примере рисунка в красном блоке тоже текст будет

Примерно таким образом: http://codr.io/xzlc9xk

вот так: https://jsfiddle.net/AlexZaw/gpL89s3m/3/
живой пример с описанием

Комментарии - это большой плюс.
В вашем варианте не учтено скругление угла сверху слева у блока с текстом. Ограничение ширины заголовка - это плохой прием. Уж лучше было сделать его блочно-строчным.

это просто решение практикума с htmlbook, в задании стоял именно такой вариант, добавить скругление не проблема, а вот с шириной заголовка - хорошая мысль