系统流程图代码样式表

1 year ago · 374d63bb0e
parent b95a48807b
commit 374d63bb0e
1 changed files with 103 additions and 0 deletions
--- a/flowchart.css
+++ b/flowchart.css
@ -0,0 +1,103 @@
+#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%);
+}