Непростой пятиугольник css?

Question

[Zempik]

Подскажите, как сделать вот такой пятиугольник на css (внутри будет мой текст, поэтому вставка jpg не подходит).

Answer 1

[Олег]

http://codepen.io/werty1001/pen/NAwEOq

Comments

[Zempik]

как сделать рамку жирнее (толще)?

[Нерон Лордов]

border-width 2px 2px 0 0
?

[Zempik]

Nekto_Habr: проверти сами. Там своя механика и этот способ не полностью работает (я про бордер)

[Олег]

Zempik: У обоих before поменяйте width, у after height

[Нерон Лордов]

Zempik: я и не верстальщик ни разу, просто дизайнер, немного знающий хтмл и сующий нос)

Answer 2

[Сергей]

https://jsfiddle.net/qvzjw9ra/

Правда это ужасно ненадежно и криворуко :)

ЗЫ: ответ выше надежнее

ЗЫЫ: не проверил, а мой пример просто не сохранился :-( прошу прощения, что засорил эфир

Comments

[Zempik]

у меня криво отображается

[Сергей]

Zempik: не обращайте внимания :) выше надежнее способ показали (правда я так и не понял как он работает)

[Михаил]

Сергей: я не верстальщик, но понял так: есть основной блок с рамкой и есть блок с текстом который распологается слева винзу, так же он повернут, как-то так.