#begin{ background: gray; border: 1px solid red; font-size: small; width:80px; height:20px; position:absolute; right:100px; top:156px; cursor:pointer; text-align: center; clip-path: polygon(0% 50%, 15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%); } #process{ border: 1px solid #333; font-size: small; width:60px; height:20px; position:absolute; right:20px; top:156px; cursor:pointer; text-align: center; } #arrow{ background: black; border: 1px solid black; width:80px; height:20px; position:absolute; right:100px; top:200px; cursor:pointer; clip-path: polygon(0% 40%, 95% 40%, 92% 10%, 95% 0%, 100% 50%, 95% 100%, 92% 90%, 95% 60%, 0% 60%); } #arrow1{ background: black; border: 1px solid black; width:70px; height:20px; position:absolute; right:20px; top:200px; cursor:pointer; clip-path: polygon(0% 0%, 52% 0%, 52% 80%, 95% 80%, 93% 75%, 95% 70%, 100% 85%, 95% 100%, 93% 95%, 95% 90%, 48% 90%, 48% 10%, 0% 10%); } #judge{ background: gray; font-size: small; border: 1px solid black; width:80px; height:20px; position:absolute; right:100px; top:250px; cursor:pointer; text-align: center; clip-path: polygon(0% 50%, 50% 0%, 100% 50%, 50% 100%); } #end{ background: white; border: 1px solid black; width:70px; height:20px; position:absolute; right:20px; top:250px; cursor:pointer; text-align: center; border-radius: 10px; } #led{ background: gray; font-size: small; border: 1px solid black; width:80px; height:20px; position:absolute; right:100px; top:300px; cursor:pointer; text-align: center; clip-path: polygon(0% 50%, 21% 0%, 90% 0%, 92% 3%, 93% 6%, 94% 10%, 95% 13%, 96% 17%, 96% 20%, 96% 24%, 96% 28%, 96% 32%, 97% 35%, 97% 38%, 97% 41%, 97% 44%, 97% 46%, 98% 50%, 97% 54%, 97% 56%, 97% 59%, 97% 62%, 97% 65%, 96% 68%, 96% 72%, 96% 76%, 96% 80%, 96% 83%, 95% 87%, 94% 90%, 93% 94%, 92% 97%, 90% 100%, 21% 100%); } #link{ background: white; border: 1px solid black; width:20px; height:20px; position:absolute; right:50px; top:300px; cursor:pointer; text-align: center; clip-path: circle(50% at 50% 50%); }