요소가없는 불평등 한 슬라이스

컨텐츠 또는 애니메이션이 필요한 동일한 슬라이스 컨텐츠 또는 애니메이션이 필요한 불평등 한 슬라이스

균일 한 슬라이스를 생성하려면 원뿔형 그레이드 ()에 대한 목록을 정지하십시오. 예를 들어, 다음 팔레트를 고려하십시오.

• $ c : #f94144, #f3722c, #f8961e, #f9c74f, #90be6d, #43aa8b, #577590; 중지 ($ C) { $ N : 길이 ($ C); // 슬라이스 수 $ p : 100%/$ n; // 원의 %로 각도를 슬라이스합니다 $ l : (); // 정지 목록, 처음에는 비어 있습니다 @for $ i from 1 ~ $ n { $ l : $ l, nth ($ c, $ i) 0% $ i*$ p } @return $ l }
• 이 접근법은 다음과 같은 정지 목록을 생성합니다. #F8961E 0% 42.8571428571%, #F9C74F 0% 57.1428571429%, #90be6d 0% 71.4285714286%, #43AA8B 0% 85.7142857143%, #577590 0% 100%
• 그러나이 출력에는 불필요한 소수점과 명시 적 기본 중지가 포함됩니다. 따라서 개선 된 기능은 다음과 같습니다. $ N : 길이 ($ C); // 슬라이스 수 $ p : 100%/$ n; // 원의 %로 각도를 슬라이스합니다 $ l : (); // 정지 목록, 처음에는 비어 있습니다 @for $ i from 1 ~ $ n { $ l : $ l, nth ($ c, $ i) if ($ i & gt; 1, 0%, unquote ( '')) if ($ i & lt; $ n, Round ($ i*$ p), unquote ( '')) } @return $ l }
• 결과는 다음과 같습니다. #90be6d 0%71%, #43aa8b 0%86%, #577590 0%

이 기능은 더 직관적 인 정지를 생성합니다.

는 이것을 conic-gradient ()로 사용하여 다음 클래스를 정의합니다.

. 너비 : 20em; / * 원하는 파이 직경으로 폭을 설정하십시오 */ 종횡비 : 1; / * 요소 제곱 */ 국경-라디우스 : 50%; / * 사각형을 디스크로 돌리십시오 */ / * 똑같은 크기의 슬라이스 */ 배경 : conic-gradient (정지 ($ c)) }

4 개의 CSS 선언만으로 동일한 슬라이스로 구분 된 원을 만들 수 있습니다. 슬라이스를 회전시키기 위해, 우리는 단순히 conic-gradient (). 너비 : 16EM; / * 원하는 파이 직경으로 폭을 설정하십시오 */ 종횡비 : 1; / * PIE 요소 제곱 */ 국경-라디우스 : 50%; / * 사각형을 디스크로 돌리십시오 */ / * 똑같이 크기의 슬라이스 */ 배경: conic-gradient (17deg, #f94144 14%, #f3722c 0%29%, #f8961e 0%43%, #f9c74f 0%57%, #90be6d 0%71%, #43aa8b 0%86%, #577590 0%) }