2,599
edits
Test: Difference between revisions
no edit summary
Efernandez (talk | contribs) No edit summary |
Efernandez (talk | contribs) No edit summary |
||
| Line 107: | Line 107: | ||
border-right: 10px solid #000; /* This creates the left-pointing arrow */ | border-right: 10px solid #000; /* This creates the left-pointing arrow */ | ||
padding-left: 10px; | padding-left: 10px; | ||
} | |||
.right-down-arrow { | |||
background-color: black; | |||
border: 1px solid; | |||
width: 100%; | |||
height: 100%; | |||
display: flex; | |||
min-height: 50px; | |||
/*https://bennettfeely.com/clippy/*/ | |||
clip-path: polygon(0 49%, 51% 49%, 51% 90%, 55% 90%, 50% 100%, 45% 90%, 49% 90%, 49% 51%, 0 51%); | |||
} | |||
.right-down-line { | |||
background-color: black; | |||
width: 100%; | |||
height: 100%; | |||
display: flex; | |||
min-height: 50px; | |||
/*https://bennettfeely.com/clippy/*/ | |||
clip-path: polygon( | |||
0% calc(50% - 2px), | |||
calc(50% + 2px) calc(50% - 2px), | |||
calc(50% + 2px) 100%, | |||
calc(50% - 2px) 100%, | |||
calc(50% - 2px) calc(50% + 2px), | |||
0 calc(50% + 2px)); | |||
} | |||
.down-arrow { | |||
background-color: black; | |||
border: 1px solid; | |||
width: 100%; | |||
height: 100%; | |||
display: flex; | |||
min-height: 50px; | |||
/*https://bennettfeely.com/clippy/*/ | |||
clip-path: polygon(51% 0, 51% 90%, 55% 90%, 50% 100%, 45% 90%, 49% 90%, 49% 0); | |||
} | |||
.horizontal-line { | |||
background-color: black; | |||
width: 100%; | |||
height: 100%; | |||
display: flex; | |||
/*https://bennettfeely.com/clippy/*/ | |||
clip-path: polygon( | |||
0% calc(50% - 2px), | |||
100% calc(50% - 2px), | |||
100% calc(50% + 2px), | |||
0% calc(50% + 2px)); | |||
} | } | ||
| Line 133: | Line 184: | ||
<div class="connector col-1"></div> | <div class="connector col-1"></div> | ||
<div class="desition-container col-1"><div class="node desition">Yes or No?</div></div> | <div class="desition-container col-1"><div class="node desition">Yes or No?</div></div> | ||
<div class="horizontal-line col-2"></div> | |||
<div class="right-down-line col-3"></div> | |||
<div class="down-arrow col-1"></div> | |||
<div class="down-arrow col-3"></div> | |||
<div class="node clickable col-1">Maybe Yes!</div> | |||
<div class="node clickable col-3">Maybe No!</div> | |||
}} | }} | ||