позиция фона для цвета фона

Я бы применил аналогичный подход к StuR, но использовал бы положение фона вместо точек градиента. Затем вы можете установить фоновое положение, как обычно.

div {
  background:linear-gradient(left, #000, #000) no-repeat 50px 50px;
}

Еще один способ сделать это - добавить псевдоэлемент к элементу div, например:

div {
  ::before {
    border-top: 10px solid #0066a4;
    content:"";
    margin: 0 auto; /* this centers the line to the full width specified */
    position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
    top: 12px; left: 0; right: 0; bottom: 0;
    z-index: -1;
  }
}

См. Этот CodePen Эрика Раша для рабочего примера: https://codepen.io/ericrasch/pen/Irlpm

Если вы можете создать псевдоэлемент :: before с цветом, высотой и шириной bg и просто сместить его от своего родителя, у вас будет полный контроль над его внешним видом. Намного проще, чем поместить границу в псевдоэлемент:

/* adding a ::before element with bg and border radius to create a
cropped circle to overlay parent bg image's blue right end */

.myElement::before {
  background-color: #fff;
  content: "";
  margin: 0 auto;
  position: absolute;
  top: 43px;
  right: 0;
  width: 300px;
  height: 201px;
  z-index: -1;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}