JSFiddle - React, Tailwind, and code Playground

Адаптивный вариант

HTML

<div></div>

CSS

* {
  box-sizing: border-box
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

div {
  background: radial-gradient(farthest-side at top, transparent 99%, white 100%) no-repeat center calc(100% + 1px) / 120% 25%,linear-gradient(to right, rgba(255, 127, 39, 0.7), rgba(16, 21, 102, 0.7)) , url('http://cdn2.livelongandtravel.com/travel-by-train-1920x1200.jpg') no-repeat top center / cover;
}
div::after {
  content: '';
  display: block;
  padding-top: 50%; 

}