|
|
| Line 1: |
Line 1: |
| .circle {
| | |
| width: 200px;
| |
| height: 200px;
| |
| border-radius: 50%;
| |
| position: relative;
| |
| animation: spin 5s linear infinite;
| |
| list-style-type: none;
| |
| }
| |
| | |
| .segment {
| |
| width: 50%;
| |
| height: 50%;
| |
| position: absolute;
| |
| background-color: transparent;
| |
| clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
| |
| }
| |
| | |
| .segment:nth-child(1) {
| |
| background-color: red;
| |
| top: 0;
| |
| left: 0;
| |
| }
| |
| | |
| .segment:nth-child(2) {
| |
| background-color: blue;
| |
| top: 0;
| |
| left: 50%;
| |
| transform: rotate(90deg);
| |
| transform-origin: top left;
| |
| }
| |
| | |
| .segment:nth-child(3) {
| |
| background-color: green;
| |
| top: 50%;
| |
| left: 50%;
| |
| transform: rotate(180deg);
| |
| transform-origin: top left;
| |
| }
| |
| | |
| .segment:nth-child(4) {
| |
| background-color: yellow;
| |
| top: 50%;
| |
| left: 0;
| |
| transform: rotate(270deg);
| |
| transform-origin: top left;
| |
| }
| |
| | |
| @keyframes spin {
| |
| from {
| |
| transform: rotate(0deg);
| |
| }
| |
| to {
| |
| transform: rotate(360deg);
| |
| }
| |
| }
| |
| | |
| | |
| | |
| .hole { | | .hole { |
| position: absolute; | | position: absolute; |