logicCircuits/ANDgate.html at main · industrialsociety/logicCircuits · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AND Gate Symbol</title>
<style>
  .and-gate {
    width: 60px; /* Reduced width of the main body by half */
    height: 60px; /* Height of the main body */
    border: 2px solid black; /* Border of the AND gate */
    border-radius: 0 30px 30px 0; /* Full rounding on the right side */
    background-color: transparent; /* Transparent body of the AND gate */
    position: relative; /* Needed for absolute positioning of the input lines */
    margin: 20px; /* Space around the element */
  }

  .and-gate:before, .and-gate:after {
    content: '';
    position: absolute;
    height: 2px; /* Thickness of the input lines */
    background-color: black; /* Color of the input lines */
    left: -20px; /* Positioning the input lines to the left outside the body */
    top: 50%;
    transform: translateY(-50%);
    width: 20px; /* Length of the input lines */
  }

  .and-gate:after {
    top: calc(50% + 20px); /* Adjusting the second line to be lower */
  }
</style>
</head>
<body>

<div class="and-gate"></div>

</body>
</html>