테스트1235(비교)

==== 기타모양 그라데이션 ====

원 모양의 그라데이션을 원할시 다음과 같이 입력해 출력할 수 있습니다.

{{{{{{#!wiki style="background: radial-gradient(circle at (위치)% (높이)%, #<헥스 코드 1>, #<헥스 코드 2>)"}}}

}}}

* 위치: 0%일시 원의 중심이 최좌측, 100%일시 원의 중심이 최우측

* 높이: 0%일시 원의 중심이 최상단, 100%일시 원의 중심이 최하단

예시

[br]'''{{{#fff 위치 50%[br]높이 50%[br]크기 50%}}}'''[br][br]}}} ||||<width=300><nopad> {{{#!wiki style="padding: 5px 10px; background: radial-gradient(circle at 0% 50%, #000 50%, #808080 50%)"

[br]'''{{{#fff 위치 0%[br]높이 50%[br]크기 50%}}}'''[br][br]}}} ||||<width=300><nopad> {{{#!wiki style="padding: 5px 10px; background: radial-gradient(circle at 50% 0%, #000 50%, #808080 50%)"

마찬가지로 위의 linear-gradient와 혼용하여 사용가능합니다.

{{{||<width=300><nopad> {{{#!wiki style="padding: 5px 10px; background: radial-gradient(circle at 50% 0%, #000 30%, transparent 30%), linear-gradient(to top, #000, #808080)"

[br]'''{{{#fff 위치 50%[br]높이 0%[br]크기 30%}}}'''[br][br]}}} ||

}}}

||<width=300><nopad> {{{#!wiki style="padding: 5px 10px; background: radial-gradient(circle at 50% 0%, #000 30%, transparent 30%), linear-gradient(to top, #000, #808080)"

[br]'''{{{#fff 위치 50%[br]높이 0%[br]크기 30%}}}'''[br][br]}}} ||

코닉(극좌표) 그라데이션을 사용하면 파이 모양 그래프를 만들 수 있습니다.

* {{{conic-gradient(gray 70%, transparent 0)}}}

* {{{conic-gradient(gray 30%, transparent 0)}}}

{{{#!wiki style="display: inline-block"

{{{#!wiki style="display: table-cell; width: 100px; height: 100px; border-radius: 50%; text-align: center; vertical-align: middle; background: conic-gradient(gray 70%, transparent 0)"

{{{+1 70%}}}}}}}}} {{{#!wiki style="display: inline-block"

{{{#!wiki style="display: table-cell; width: 100px; height: 100px; border-radius: 50%; text-align: center; vertical-align: middle; background: conic-gradient(gray 30%, transparent 0)"

{{{+1 30%}}}}}}}}}