<div class="ball"></div>
body {
  padding: 3em 0;
  display: flex;
  justify-content: center;
}

.ball {
  position: relative;
  background: blue;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: inset 20px 0 0 -10px yellow,
                inset -20px 0 0 -10px red;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.