I need to create an element like this:

[![enter image description here](https://i.stack.imgur.com/lv0Ur.jpg)](https://i.stack.imgur.com/lv0Ur.jpg)

5 corners, border and text in `<span>` element. How can I achieve that result? I have only managed to create the normal element with 4 corners.

```css
.pin {
  position: absolute;
  top: 7px;
  right: 7px;
  display: inline-block;
  min-height: 34px;
  min-width: 42px;
  vertical-align: top;
  padding: 0px 4px;
  color: #fff;
  text-align: center;
  line-height: 1.2;
  text-transform: uppercase;
  border-radius: 4px;
  box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.28);
}
.pin__green {
  background-color: #689f39;
  border: 1px solid #59902b;
}
.pt {
  font-size: 13px;
  font-family: 'PT Sans';
  display: block;
  margin-top: 10px;
}
```

```html
<span class="pin pin__green">
  <span class="pt">
    <span>2</span>
    <span>new</span>
  </span>
</span>
```