Как я могу воссоздать следующий Пентагон вокруг изображения? ⇐ CSS

[Anonymous]

Итак, я пытаюсь воссоздать следующий дизайн. Я хочу, чтобы пентагон был на паряке вокруг изображения, и, как вы можете видеть на изображении ниже, некоторые стороны находятся на вершине изображения, а некоторые другие под ним.
< /code>
.pentagon-1 {
width: 150px;
height: 150px;
background: #4169e1;
clip-path: polygon( 50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
}


Подробнее здесь: https://stackoverflow.com/questions/796 ... d-an-image