Re-position radial gradient

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 <a href="http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/">faux inset border-radius</a> 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 <a href="http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/">faux inset border-radius</a> 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))