CSS를 사용하여 배경 이미지로 삼각형 이미지를 만드는 방법은 무엇입니까?

.pageOption {
  position: relative;
  width: 900px;
  height: 600px;
}

.pageOption .photo {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 900px;
  height: 600px;
  background: url('../images/menuPhoto.png') no-repeat 0 0;
}

.pageOption .cinema {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 900px;
  height: 600px;
  background: url('../images/menuCinema.png') no-repeat 0 0;
}

<div>

.pageOption {
  overflow: hidden;
  position: relative;
  width: 40em; height: 27em;
}

.option, .option img { width: 100%; height: 100%; }

.option {
  overflow: hidden;
  position: absolute;  
  /* arctan(27 / 40) = 34.01935deg 
   * need to skew by 90deg - 34.01935deg = 55.98065deg
  */
  transform: skewX(-55.98deg);
}

.option:first-child {
  left: -.25em;
  transform-origin: 100% 0;
}

.option:last-child {
  right: -.25em;
  transform-origin: 0 100%;
}

.option img {
  transform: skewX(55.98deg);
  transform-origin: inherit;
}