|
|
| Line 1: |
Line 1: |
| .round-table { | | .pie-chart-table { |
| position: relative;
| | position: relative; |
| width: 300px;
| | width: 300px; |
| height: 300px;
| | height: 300px; |
| border-radius: 50%;
| | border-radius: 50%; |
| overflow: hidden;
| | clip-path: circle(50%); |
| display: inline-block;
| | overflow: hidden; |
| border: 2px solid red; /* Внешняя граница */
| |
| box-sizing: border-box;
| |
| padding: 20px; /* Пространство между внешней и внутренней границами */
| |
| } | | } |
|
| |
|
| .round-table .inner-ring { | | .pie-slice { |
| position: absolute;
| | position: absolute; |
| top: 20px; /* Зависит от padding */
| | width: 50%; |
| left: 20px; /* Зависит от padding */
| | height: 50%; |
| width: calc(100% - 40px);
| | background-color: #D02019; |
| height: calc(100% - 40px);
| | transform-origin: 100% 100%; |
| border-radius: 50%;
| | clip-path: polygon(0% 0%, 100% 0%, 100% 100%); |
| border: 2px solid red; /* Внутренняя граница */
| | display: flex; |
| background-color: white; /* Цвет пустоты внутри */
| | align-items: center; |
| z-index: 1;
| | justify-content: center; |
| | color: white; |
| | font-weight: bold; |
| } | | } |
|
| |
|
| .round-table table { | | .slice1 { transform: rotate(0deg) translate(50%); } |
| width: 100%;
| | .slice2 { transform: rotate(60deg) translate(50%); } |
| height: 100%;
| | .slice3 { transform: rotate(120deg) translate(50%); } |
| border-collapse: collapse;
| | .slice4 { transform: rotate(180deg) translate(50%); } |
| table-layout: fixed;
| | .slice5 { transform: rotate(240deg) translate(50%); } |
| position: relative;
| | .slice6 { transform: rotate(300deg) translate(50%); } |
| z-index: 2;
| |
| } | |
| | |
| .round-table td, .round-table th { | |
| text-align: center;
| |
| vertical-align: middle;
| |
| padding: 10px;
| |
| border: 1px solid red; /* Границы ячеек */
| |
| background-clip: padding-box;
| |
| } | |
| | |
| /* Примеры для разных цветов фона */
| |
| .round-table td.bg1 { background-color: #FFD700; } /* Золотой */
| |
| .round-table td.bg2 { background-color: #ADFF2F; } /* Зеленый */ | |
| .round-table td.bg3 { background-color: #00BFFF; } /* Голубой */ | |
| .round-table td.bg4 { background-color: #FF69B4; } /* Розовый */ | |
| | |
|
| |
|
| .table-photos { | | .table-photos { |