100일 CSS #3 : 피라미드

문제

https://100dayscss.com/days/3/

 

The Pyramide: Not as challenging as the real pyramids in Egypt, but the shadow path is not easy.
피라미드: 이집트의 실제 피라미드만큼 도전적이지는 않지만 그림자 패스는 쉽지 않습니다.

 

내 풀이

See the Pen Untitled by dobbyjang0 (@dobbyjang0) on CodePen.

삼각형

모법답안처럼 path를 이용하여 (clip-path: polygon(30% 100%, 100% 100%, 0% 0%))하지 않고, border를 이용하여 야매로 했다. 그 후 transform에서 skew를 이용하여 변형해줬다.

 

공전

transform orgin을 이동 후 평행이동, 회전

 

overflow: hidden 과 clip-path

overflow : hidden을 했음에도 원 밖으로 삐져나온 도형들이 가려지지 않았다. clip-path로 지정하자 그제서야 가려짐. overflow : hidden 때 가려지지 않았던 이유는 아무리 border를 구부려놔도 content box의 크기는 사각형이라 그런 듯 하다.

 

알게된 점

애니메이션의 transition-timing-function은 각 구간마다 적용되는 것

 

수정하고픈 것

예시처럼 부드럽게 이어지지 않고 뚝뚝 끊기는 점?

 

예시 모범답안

See the Pen 003 - The Pyramide by Matthias Martin (@roydigerhund) on CodePen.