[CSS] 메인배경 삼각형으로 이미지 마스크하는 css 처리방법

위의 이미지에서 빨간 라인 영역은 배경이미지처리가 아닌 css로 처리한 예입니다.

div로 삼각형모양으로 마스킹하는 방법을 알려드리고자 합니다.

 

transform 을 활용하여 만드는 방법입니다.

transform의 특성을 먼저 알아보고 가겠습니다.

 

Transform (개체를 변형시키다)

회전 효과, 스케일링(확대/축소) 효과, 기울임 조절, 위치 변경과 같은 변형 처리가 가능합니다.

값에는 translate(), scal(), rotate(), skew() 4종류의 트랜스폼 함수를 사용해, 이동, 확대, 축소, 회전, 경사를 만들수 있습니다.

 

1. 이동(translate)

- translate() 함수는 요소를 X축 방향이나 Y축 방향으로 이동시킬 수 있습니다.

- X축 방향값을 플러스로 하면 오른쪽으로, 마이너스로 하면 왼쪽으로 이동합니다.

- Y축 방향값을 플러스로 하면 아래로, 마이너스로 하면 위로 이동합니다.

 

2. 확대/축소(scale)

- scale() 함수는 요소를  x축과 y축의 방향으로 확대/축소할 수 있습니다.

- 변형의 기준점은 객제의 중심입니다.

 

3. 회전(rotate)

- rotate() 함수는 각도를 지정해 요소를 회전시킬 수 있습니다.

- 플러스 각도를 지정하면 시계방향으로, 마이너스 각도를 지정하면 시계 반대방향으로 회전합니다.

- 변형의 기준점은 객제의 중심입니다.

 

4. 경사(skew)

- skew() 함수는 x축과 y축 방향으로 요소를 기울일 수 있습니다.

- 변형의 기준점은 객제의 중심입니다.

 

[ 실제 작업의 예시 ]

위의 이미지처럼 한쪽은 이동한 기울어진 삼각형 배경의 예시입니다.

---

.container {
  width: 500px;
  height: 300px;
  background: linear-gradient(lightblue, dodgerblue);
  position: relative;
  overflow:hidden;
}

.container:after{
  position:absolute;
  content: "";
  width: 100%;
  height: 70%;
  left: -40%;
  top: 780px;
  background: #e6e9ec;
  transform: skew(16deg) rotate(16deg);
}

.container:before{
  position:absolute;
  content: "";
  width: 100%;
  height: 70%;
  left: 20%;
  top: 780px;
  background: #e6e9ec;
  transform: skew(-10deg) rotate(-10deg);
}

---

 

* 배경이미지가 있을 경우의 예입니다.

  배경이미지의 경우 top:50% 양쪽에  pseudo-elements 를 적용해 줍니다.

---

.container {
  width: 500px;
  height: 300px;
  background: url("배경이미지 URL");
  position: relative;
  overflow: hidden;
}
.container:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: -50%;
  top: 50%;
  background: linear-gradient(lightblue,dodgerblue);
  transform: skew(10deg) rotate(10deg);
}
.container:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 50%;
  top: 50%;
  background:linear-gradient(lightblue,dodgerblue);
  transform: skew(-10deg) rotate(-10deg);
}

---

유용한 css 소스입니다.

디자인을 다양하게 시도해 보세요

감사합니다.