I want to create a image status

Ionic Framework ionic-v3
1

I want to create a image status like this below my exampledesire design

But my result is
mydesig
i want to do like above example. How can i do that
Html

<ion-card class="res-card">
<span class="open">Open</span>
  <img src="https://cde.peru.com//ima/0/1/6/3/2/1632689/611x458/50-best-restaurants.jpg">
  <ion-card-content>
    <p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.</p>
  </ion-card-content>
</ion-card>

.css


.open {
	background: skyblue;
	width: 100px;
	font-size: 1.10rem;
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	padding-top: .5rem;
	padding-bottom: .5rem;
	top: 81px;
	right: -2px;
	z-index: 99;
	text-align: center;
}

Please help me anyone
How can i fix my issue
awaiting for a positive response
Thanks.

2 
.res-card{
overflow: hidden;

}