The .ticket-punch() mix-in allows for very easy creation of "punchouts" on the left and right side of an element using :before and :after pseudo-elements.

TicketPunch.less

.ticket(@size: 11px, @bgColor: #fff, @borderStyle: solid, @borderWidth: 1px, @borderColor: #333) {
	position: relative;
	border: @borderStyle @borderWidth @borderColor;
	text-align: center;
	padding: 10px 20px;
	display: inline-block;
	&:before {
		position: absolute;
		content: '';
		width: @size;
		height: @size;
		background-color: @bgColor;
		border-radius: 50%;
		left: (@size / 2 * -1);
		top: 50%;
		margin-top: (@size / 2 * -1);
		border-right: @borderStyle @borderWidth @borderColor;
	}
	&:after {
		position: absolute;
		content: '';
		width: @size;
		height: @size;
		background-color: @bgColor;
		border-radius: 50%;
		right: (@size / 2 * -1);
		top: 50%;
		margin-top: (@size / 2 * -1);
		border-left: @borderStyle @borderWidth @borderColor;
	}
}