Re-position radial gradient - html

Question

I'm working on a ticket shape div, my problem is that I can't move the circles to the position I want.
I'm following this code:
* {
box-sizing: border-box;
}
body {
padding: 2em;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: center;
background-color: #ff4500;
-webkit-animation: bg 10s linear infinite alternate;
animation: bg 10s linear infinite alternate;
color: rgba(0, 0, 0, 0.25);
font-size: 13px;
}
a {
color: rgba(0, 0, 0, 0.35);
}
.ticket {
display: inline-block;
box-sizing: content-box;
-webkit-filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
position: relative;
height: 1em;
padding: 1em;
color: #000;
font-size: 16px;
background-size: 51% 100%;
background-repeat: no-repeat;
background-image: radial-gradient(circle at 0 50%, rgba(255, 255, 224, 0) 0.4em, #ffffe0 0.5em), radial-gradient(circle at 100% 50%, rgba(255, 255, 224, 0) 0.4em, #ffffe0 0.5em);
background-position: top left, top right;
}
#-webkit-keyframes bg {
0% {
background-color: #ff4500;
}
50% {
background-color: #b0e0e6;
}
100% {
background-color: #ff4500;
}
}
#keyframes bg {
0% {
background-color: #ff4500;
}
50% {
background-color: #b0e0e6;
}
100% {
background-color: #ff4500;
}
}
<span class="ticket">Ticket shape with transparent holes punched!</span>
<br />
<br />
<p>Based on Lea Verou's faux inset border-radius technique.</p>
What I want is move the circles to the top left and bottom left of the div.

Answer 1

The problem
The problem is that the first background is being displayed over the top of the second background, you can move the position of the circle but it is hidden.
To fix
You can achieve this by making the following changes:
background-size: 51% 100%; to background-size: 100% 50%; to make the background take up half of the height instead of the width
background-position: top left, top right; to background-position: top left, bottom left; to position the backgrounds at the top and bottom
background-image: radial-gradient(circle at 0 50%, rgba(255,255,224,0) 0.4em, #ffffe0 0.5em), radial-gradient(circle at 100% 50%, rgba(255,255,224,0) 0.4em, #ffffe0 0.5em); to background-image: radial-gradient(circle at 0 0, rgba(255, 255, 224, 0) 0.4em, #ffffe0 0.5em), radial-gradient(circle at 0 100%, rgba(255, 255, 224, 0) 0.4em, #ffffe0 0.5em); to position the radial gradient at the top and bottom of the backgrounds
* {
box-sizing: border-box;
}
body {
padding: 2em;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: center;
background-color: #ff4500;
-webkit-animation: bg 10s linear infinite alternate;
animation: bg 10s linear infinite alternate;
color: rgba(0, 0, 0, 0.25);
font-size: 13px;
}
a {
color: rgba(0, 0, 0, 0.35);
}
.ticket {
display: inline-block;
box-sizing: content-box;
-webkit-filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
position: relative;
height: 1em;
padding: 1em;
color: #000;
font-size: 16px;
background-size: 100% 50%;
background-repeat: no-repeat;
background-image: radial-gradient(circle at 0 0, rgba(255, 255, 224, 0) 0.4em, #ffffe0 0.5em), radial-gradient(circle at 0 100%, rgba(255, 255, 224, 0) 0.4em, #ffffe0 0.5em);
background-position: top left, bottom left;
}
#-webkit-keyframes bg {
0% {
background-color: #ff4500;
}
50% {
background-color: #b0e0e6;
}
100% {
background-color: #ff4500;
}
}
#keyframes bg {
0% {
background-color: #ff4500;
}
50% {
background-color: #b0e0e6;
}
100% {
background-color: #ff4500;
}
}
<span class="ticket">Ticket shape with transparent holes punched!</span>
<br />
<br />
<p>Based on Lea Verou's faux inset border-radius technique.</p>

Answer 2

you can use the below property for positioning change.
background-image radial-gradient(circle at 0 50%, rgba($bg,0) $hole, $bg ($hole + .1em)), radial-gradient(circle at 100% 50%, rgba($bg,0) $hole, $bg ($hole + .1em))