linear-gradient

선형 linear-gradient(angle, color-stop1, color-stop2);
원형 radial-gradient(shape size at position, start-color, ..., last-color);

선형을 적용해보면, 방향과 적용 컬러를 순서대로 선언하게 됩니다.
방향 to bottom은 기본 값으로 생략이 가능합니다.

linear-gradient(to bottom, yellow 20%, steelblue 50%)

보통은 부드럽게 컬러가 변할 때 많이 쓰는 속성이지만, 경계면이 매끄럽게 떨어지도록 만드는 방법도 있습니다. 첫 번째와 두 번째 위치값이 동일할 경우, 경계선이 만나면서 그라데이션 영역이 사라지므로 아래와 같이 단색 면이 됩니다.

linear-gradient(yellow 50%, steelblue 50%)

이러한 속성을 활용하면 하나의 div에 background-image로 도형을 드로잉해 볼 수 있습니다.