<div class="ticket">
  <div data-number="198812">Admit<br/>One</div>
</div>
<div class="ticket">
  <div data-number="198813">Admit<br/>One</div>
</div>

.ticket {
    backface-visibility: hidden;
    transform: rotate(16deg) translateY(25%) translateZ(0);
    transform-origin: 50% 50%;
    top: 50%;
    left: 50%;
    margin-top: -65px;
    margin-left: -144px;
    position: absolute;
    display: inline-block;
    padding: 15px 25px;
    background-image:
        radial-gradient( ellipse closest-side at 50%  50%, hsla(0, 0%, 100%, 0.10), transparent 90%),
        radial-gradient( circle at 0    100%, transparent 14px, #fa616d 15px),
        radial-gradient( circle at 100% 100%, transparent 14px, #fa616d 15px),
        radial-gradient( circle at 100% 0, transparent 14px, #fa616d 15px),
        radial-gradient( circle at 0    0, transparent 14px, #fa616d 15px);
    background-position: center center, bottom left, bottom right, top right, top left;
    background-size: cover, 51% 51%, 51% 51%, 51% 51%, 51% 51%;
    background-repeat: no-repeat;
    border-width: 0 4px;
    border-color: transparent;
    border-style: solid;
    border-image: radial-gradient(cover circle, #fa616d 0%, #fa616d 50%, transparent 51%) 0 39% / 15px 4px repeat;
    -webkit-filter: drop-shadow(hsla(0, 0%, 0%, 0.55) 1px 1px 2px);
}

.ticket + .ticket {
    transform: rotate(-7deg) translateY(-25%) translateX(10px) translateZ(0);
    z-index: 1;
}

.ticket > div {
    width: 230px;
    height: 100px;
    box-sizing: border-box;
    position:relative;
    border-color: #ea4a56;
    border-style: solid;
    border-width: 2px;
    border-radius:5px;
  	text-align:center;
  	font: 2em/1 Impact;
  	text-transform:uppercase;
  	padding:15px;
  	font-stretch: extra-expanded; 	
}

.ticket > div:before,
.ticket > div:after {
	  content: attr(data-number);
  	font: .625em/1 'Courier New';
  	position: absolute;
  	width: 96px;
  	line-height: 28px;
  	transform: rotate(90deg) translateZ(0) ;
  	transform-origin: 0% 0%;
  	text-align:center;
  	display: block; 	
  	top: 0;
  	border-color: #ea4a56;
  	border-style: solid;
  	border-width: 2px 0 0;
}
.ticket > div:before {
	left: 28px;
}

.ticket > div:after {
	transform-origin: 100% 0%;
	right: 28px;
	transform: rotate(-90deg) translateZ(0);
}

html, body { height:100%; }

body {
    background-image:
    url(//i.jyhr.co/cdpn/wood.png);
    background-position: 50%;
}