|
|
| 1번째 줄: |
1번째 줄: |
| <includeonly><onlyinclude><div class="" style="display: flex;position: relative; | | <onlyinclude><div class=" arrow-test" style="display: flex; position: relative;"><div class="arrow- dataset" |
| {{#switch: {{{direction|}}}
| | data-direction="{{#if:{{{direction|}}}|{{{direction}}}|left}}" |
| | right|left|#default =
| | data-thick="{{#if:{{{thick|}}}|{{{thick}}}|5}}" |
| min-height: {{#expr: {{#if:{{{tip-length|}}}|{{{tip-length}}}|48}}*sin({{#if:{{{tip-deg|}}}|{{{tip-deg}}}|30}}*pi/180)+{{#if:{{{thick|}}}|{{{thick}}}|5}}}}px;
| | data-length="{{#if:{{{length|}}}|{{{length}}}}}" |
| {{#if:{{{length|}}}|width: {{{length}}}px;}}
| | data-color="{{#if:{{{color|}}}|{{{color}}}|black}}" |
| | up|down =
| | data-deg="{{#if:{{{deg|}}}|{{{deg}}}|30}}" |
| min-width: {{#expr: {{#if:{{{tip-length|}}}|{{{tip-length}}}|48}}*sin({{#if:{{{tip-deg|}}}|{{{tip-deg}}}|30}}*pi/180)+{{#if:{{{thick|}}}|{{{thick}}}|5}}}}px;
| | data-point-direction="{{#if:{{{point-direction|}}}|{{{point-direction}}}|right}}" |
| height: {{#if:{{{length|}}}|{{{length}}}|100}}px;
| | data-point-deg="{{#if:{{{point-deg|}}}|{{{point-deg}}}|30}}" |
| }}{{#switch: {{{direction|}}}
| | data-point-length="{{#if:{{{point-length|}}}|{{{point-length}}}|48}}" |
| |left|#default=
| | ></div> |
| align-items: {{#switch: {{{tip-direction|}}}|right|#default = flex-end|left=flex-start}};
| | <div class="arrow-point"></div> |
| |right=
| | <div class="arrow-shaft"></div> |
| align-items: {{#switch: {{{tip-direction|}}}|right|#default = flex-start|left=flex-end}};
| | </div></onlyinclude> |
| |up=
| | |
| justify-content: {{#switch: {{{tip-direction|}}}|right|#default = flex-start|left=flex-end}};
| |
| |down=
| |
| justify-content: {{#switch: {{{tip-direction|}}}|right|#default = flex-end|left=flex-start}};
| |
| }}"><div class="arrow- shaft" style=" background: {{#if:{{{ color|}}}|{{{ color}}}| black}} ; border- radius: 100px; | |
| {{#switch: {{{direction|}}}
| |
| |right|left|#default= width: 100%; height: calc({{#if:{{{thick|}}}|{{{thick}}}|5}}*2px);
| |
| |up|down= width: calc({{#if:{{{thick|}}}|{{{thick}}}|5}}*2px); height: 100%;
| |
| }}"></div><div class="arrow-tip" style="
| |
| background: {{#if:{{{color|}}}|{{{color}}}|black}};
| |
| border-radius: 100px;
| |
| width: {{#if:{{{tip-length|}}}|{{{tip-length}}}|48}}px; height: calc({{#if:{{{thick|}}}|{{{thick}}}|5}}*2px);
| |
| {{#switch: {{{direction|}}}
| |
| |right =
| |
| rotate: calc({{#ifeq: {{{tip-direction|}}}|left|+|-}}{{#if:{{{deg|}}}|{{{deg}}}|30}}deg);
| |
| transform-origin: {{#expr: {{#if:{{{tip-length|}}}|{{{tip-length}}}|48}} - {{#if:{{{thick|}}}|{{{thick}}}|5}}}}px 50%;
| |
| right: 0;
| |
| |left|#default =
| |
| rotate: calc({{#ifeq: {{{tip-direction|}}}|left|+|-}}{{#if:{{{deg|}}}|{{{deg}}}|30}}deg);
| |
| transform-origin: {{#if:{{{thick|}}}|{{{thick}}}|5}}px 50%;
| |
| left: 0;
| |
| |up=
| |
| rotate: {{#expr: {{#ifeq: {{{tip-direction|}}}|left|-90+|+90-}}{{#if:{{{deg|}}}|{{{deg}}}|30}}}}deg;
| |
| transform-origin: {{#expr: {{#ifeq: {{{tip-direction|}}}|left|{{#if:{{{tip-length|}}}|{{{tip-length}}}|48}} - }}{{#if:{{{thick|}}}|{{{thick}}}|5}}}}px 50%;
| |
| top: 0;
| |
| |down=
| |
| rotate: {{#expr: {{#ifeq: {{{tip-direction|}}}|left|-90+|+90-}}{{#if:{{{deg|}}}|{{{deg}}}|30}}}}deg;
| |
| transform-origin: {{#expr: {{#ifeq: {{{tip-direction|}}}|right|{{#if:{{{tip-length|}}}|{{{tip-length}}}|48}} - }}{{#if:{{{thick|}}}|{{{thick}}}|5}}}}px 50%;
| |
| bottom: 0;
| |
| }}"></div></div></onlyinclude></includeonly>
| |
| 화면 너비에 따라 반응하는 화살표 틀. | | 화면 너비에 따라 반응하는 화살표 틀. |
| {| class="wikitable" | | {| class="wikitable" |
| 48번째 줄: |
19번째 줄: |
| | | | | |
| |{{사용자:Cerulean/작업실 | | |{{사용자:Cerulean/작업실 |
| |direction=up|tip-direction=left|length=}} | | |direction=up|point-direction=left|length=}} |
| |{{사용자:Cerulean/작업실 | | |{{사용자:Cerulean/작업실 |
| |direction=up}} | | |direction=up}} |
| | | | | |
| |- | | |- |
| |{{사용자:Cerulean/작업실|length=100|tip-length=|direction=}} | | |{{사용자:Cerulean/작업실|length=100|point-length=|direction=}} |
| | colspan="2" rowspan="2" | | | | colspan="2" rowspan="2" | |
| |{{사용자:Cerulean/작업실 | | |{{사용자:Cerulean/작업실 |
| |direction= | | |direction= |
| right | | right |
| |tip-direction=left|length=|thick=2}} | | |point-direction=left|length=|thick=2}} |
| |- | | |- |
| |{{사용자:Cerulean/작업실 | | |{{사용자:Cerulean/작업실 |
| |direction=left|tip-direction= | | |direction=left|point-direction= |
| left | | left |
| }} | | }} |
| |{{사용자:Cerulean/작업실 | | |{{사용자:Cerulean/작업실 |
| |direction=right|tip-direction=right|length=100|thick=1}} | | |direction=right|point-direction=right|length=100|thick=1}} |
| |- | | |- |
| | | | | |
| |{{사용자:Cerulean/작업실 | | |{{사용자:Cerulean/작업실 |
| |direction=down|tip-direction=right}} | | |direction=down|point-direction=right}} |
| |{{사용자:Cerulean/작업실 | | |{{사용자:Cerulean/작업실 |
| |direction=down|tip-direction=left|length=100|thick=5}} | | |direction=down|point-direction=left|length=100|thick=5}} |
| | | | | |
| |} | | |} |
