1. Tutorials
  2. CSS
  3. Simple Ticket Stub

Simple Ticket Stub

In this tutorial, you will learn how to create a simple ticket stub using pure CSS. Watch the video below for a detailed tutorial.

HTML

<body>
  <div class="ticket"></div>
</body>

CSS

body {
  margin: 0;
  background-color: #2e3537;
}

.ticket {
  position: absolute;
  width: 220px;
  height: 110px;
  background-image: radial-gradient(circle at top left, transparent 17px, #DED8B5 17px), radial-gradient(circle at top right, transparent 17px, #DED8B5 17px), radial-gradient(circle at bottom left, transparent 17px, #DED8B5 17px), radial-gradient(circle at bottom right, transparent 17px, #DED8B5 17px);
  background-size: 50% 50%;
  background-repeat: no-repeat;
  background-position: top left, top right, bottom left, bottom right;
  left: 42%;
  top: 42%;
}

.ticket:before, .ticket:after {
  box-sizing: border-box;
  position: absolute;
  color: #2B292B;
  text-align: center;
}

.ticket:before {
  content: 'ADMIT\a ONE';
  font-family: 'Roboto', sans-serif;
  white-space: pre;
  font-size: 32px;
  font-weight: bold;
  line-height: 1;
  background-image: linear-gradient(45deg, transparent 75%, #DED8B5 75%), linear-gradient(135deg, transparent 75%, #DED8B5 75%), linear-gradient(-45deg, transparent 75%, #DED8B5 75%), linear-gradient(-135deg, transparent 75%, #DED8B5 75%);
  background-size: 8px 8px;
  background-repeat: repeat-y;
  background-position: 0 0, 0 0, 100% 0, 100% 0;
  width: 236px;
  height: 76px;
  left: -8px;
  top: 17px;
  padding-right: 20px;
  padding-top: 8px;
}

.ticket:after {
  content: 'WI0001';
  font-family: monospace;
  font-size: 14px;
  line-height: 1;
  border: 2px solid #9E2B1F;
  width: 75px;
  height: 185px;
  transform: rotate(-90deg);
  padding-top: 162px;
  top: -37px;
  left: 72px;
  border-radius: 10px;
  background: linear-gradient(to bottom, transparent 155px, #9E2B1F 155px, #9E2B1F 157px, transparent 155px);
}