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

Question

[aliasst]

Подскажите можно ли сверстать такой блок как на фото? А именно нужно чтобы иконка звездочки вверху блока не перекрывалась верхним бордером как но 2 фото?

делаю так:

<article >
      <p class="star-icon"></p>
      <H2>518</H2>
      <span>оказанных услуг</span>
</article>

article {width:250px;border:2px solid #fff;float:left;margin-right:60px;}
p{width: 36px; height:34px;margin-top:-17px;margin-left:calc(50% - 18px);}
.star-icon{background:url(images/star-icon.png)no-repeat;}

Answer 1

[Владислав Бойченко]

codepen.io/anon/pen/dNZpqM

Comments

[aliasst]

спасибо!

Answer 2

[Ivan Bogachev]

Как можно оформить такую рамку ?

Comments

[aliasst]

спасибо!

Answer 3

[Вероника]

Звездочку псевдоэлементом абсолютно сплзиционировать.