틀:반응형 화살표: 두 판 사이의 차이

틀:반응형 화살표 (편집)

2025년 1월 24일 (금) 20:07 판

960 바이트 추가됨 , 2025년 1월 24일 (금)

편집 요약 없음

시각위키텍스트

Cerulean

관리자

편집

4,193

번

@@ 1번째 줄: / 1번째 줄: @@
-<includeonly><onlyinclude><div class="" style="display: inline-block;position: relative; {{#switch: {{{direction|}}}
+<includeonly><onlyinclude>{{#switch: {{{direction|}}}
-|right|left|#default = width
+|right|left|#default = <div class="" style="
-|up|down = height}}: 304px;"><div style="border-radius: 2em; background: black;
+display: flex;
-{{#switch: {{{direction|}}}
+align-items: {{#ifeq: {{{tip-direction|}}}|right
-|right|left|#default = width: 100%; height: {{#expr:{{{thick|5}}}*2}}px;
+|{{#ifeq: {{{direction|}}}|right|flex-start|flex-end}}
-|up|down = width: {{#expr:{{{thick|5}}}*2}}px; height: 100%;
+|{{#ifeq: {{{direction|}}}|right|flex-end|flex-start}}}};
-}}" class="arrow-stick"></div><div style="border-radius: 2em;
+position: relative;
-width: {{{tip-length|48}}}px; height: {{#expr:{{{thick|5}}}*2}}px;
+width: {{{length|200}}}px;
+min-height: {{#expr:{{{tip-length|48}}}*sin({{{tip-deg|30}}}*pi/180)+{{{thick|5}}}}}px;
+"><div style="
+border-radius: 2em;
+background: black;
+width: 100%; height: {{#expr:{{{thick|5}}}*2}}px;
+" class="arrow-stick"></div><div style="
+border-radius: 2em;
+width: {{{tip-length|48}}}px;
+height: {{#expr:{{{thick|5}}}*2}}px;
 background: #ff0000;
-rotate: {{#expr:
+rotate: {{#expr:{{#ifeq: {{{tip-direction|}}}|left|+|-}}{{{deg|30}}}}}deg;
-{{#switch: {{{direction|}}}|up=90|down=-90}}{{#switch: {{{tip-direction|}}}|left = +|right= -}}{{{deg|30}}}
+transform-origin: {{#expr: {{#ifeq: {{{direction|}}}|right|{{{tip-length|48}}} - {{{thick|5}}}|{{{thick|5}}}}}}}px 50%;
-}}deg; transform-origin: {{#expr:
+{{{direction|}}}: 0;
-{{#switch: {{{direction|}}}
+" class="arrow-tip"></div></div>
-|right|#default = {{#expr:{{{tip-length|48}}} - {{{thick|5}}}}}
+|up|down =
-|left = {{{thick|5}}}
+<div class="" style="
-|up = {{{thick|5}}}
+display: flex;
-|down = {{{thick|5}}}
+justify-content: {{#ifeq: {{{tip-direction|}}}|left
-}}
+|{{#ifeq: {{{direction|}}}|up|flex-end}}
-}}px 50%; {{#switch:{{{direction|}}}
+|{{#ifeq: {{{direction|}}}|down|flex-end}}}};
-|left|right = {{{direction|}}}
+position: relative;
-|up=top
+height: {{{length|200}}}px;
-|down=bottom
+min-width: {{#expr:{{{tip-length|48}}}*sin({{{tip-deg|30}}}*pi/180)+{{{thick|5}}}}}px;
-}}: 0;" class="arrow-tip"></div></div></onlyinclude></includeonly>
+"><div style="
+border-radius: 2em;
+background: black;
+width: {{#expr:{{{thick|5}}}*2}}px; height: 100%;
+" class="arrow-stick"></div><div style="
+border-radius: 2em;
+width: {{{tip-length|48}}}px;
+height: {{#expr:{{{thick|5}}}*2}}px;
+background: #ff0000;
+rotate: {{#expr:{{#ifeq: {{{tip-direction|}}}|left|-|+}} 90 {{#ifeq: {{{tip-direction|}}}|left|+|-}} {{{deg|30}}}}}deg;
+transform-origin: {{#expr: {{#ifeq: {{{direction|}}}|up
+|{{#ifeq: {{{tip-direction|}}}|left|{{{tip-length|48}}} - {{{thick|5}}}|{{{thick|5}}}}}
+|{{#ifeq: {{{tip-direction|}}}|right|{{{tip-length|48}}} - {{{thick|5}}}|{{{thick|5}}}}}
+}}}}px 50%;
+{{#switch:{{{direction|}}}|up=top|down=bottom}}: 0;
+" class="arrow-tip"></div></div>}}
+</onlyinclude></includeonly>
 {| class="wikitable"
 |+