kopia lustrzana https://github.com/projecthorus/chasemapper
126 wiersze
3.1 KiB
CSS
126 wiersze
3.1 KiB
CSS
.circle {
|
|
position: relative;
|
|
left: 0;
|
|
border: 1px solid black;
|
|
padding: 0;
|
|
width: 20em;
|
|
height: 20em;
|
|
border-radius: 50%;
|
|
list-style: none;
|
|
overflow: hidden;
|
|
}
|
|
li {
|
|
overflow: hidden;
|
|
position: absolute;
|
|
top: 0; right: 0;
|
|
width: 50%; height: 50%;
|
|
transform-origin: 0% 100%;
|
|
}
|
|
.text {
|
|
position: absolute;
|
|
left: -100%;
|
|
width: 200%; height: 200%;
|
|
text-align: center;
|
|
-webkit-transform: skewY(60deg) rotate(15deg);
|
|
-ms-transform: skewY(60deg) rotate(15deg);
|
|
transform: skewY(60deg) rotate(15deg);
|
|
padding-top: 20px;
|
|
}
|
|
|
|
li:first-child {
|
|
-webkit-transform: rotate(15deg) skewY(-60deg);
|
|
-ms-transform: rotate(15deg) skewY(-60deg);
|
|
transform: rotate(15deg) skewY(-60deg);
|
|
}
|
|
li:nth-child(2) {
|
|
-webkit-transform: rotate(45deg) skewY(-60deg);
|
|
-ms-transform: rotate(45deg) skewY(-60deg);
|
|
transform: rotate(45deg) skewY(-60deg);
|
|
}
|
|
li:nth-child(3) {
|
|
-webkit-transform: rotate(75deg) skewY(-60deg);
|
|
-ms-transform: rotate(75deg) skewY(-60deg);
|
|
transform: rotate(75deg) skewY(-60deg);
|
|
}
|
|
li:nth-child(4) {
|
|
-webkit-transform: rotate(105deg) skewY(-60deg);
|
|
-ms-transform: rotate(105deg) skewY(-60deg);
|
|
transform: rotate(105deg) skewY(-60deg);
|
|
}
|
|
li:nth-child(5) {
|
|
-webkit-transform: rotate(135deg) skewY(-60deg);
|
|
-ms-transform: rotate(135deg) skewY(-60deg);
|
|
transform: rotate(135deg) skewY(-60deg);
|
|
}
|
|
li:nth-child(6) {
|
|
-webkit-transform: rotate(165deg) skewY(-60deg);
|
|
-ms-transform: rotate(165deg) skewY(-60deg);
|
|
transform: rotate(165deg) skewY(-60deg);
|
|
}
|
|
li:nth-child(7) {
|
|
-webkit-transform: rotate(195deg) skewY(-60deg);
|
|
-ms-transform: rotate(195deg) skewY(-60deg);
|
|
transform: rotate(195deg) skewY(-60deg);
|
|
}
|
|
li:nth-child(8) {
|
|
-webkit-transform: rotate(225deg) skewY(-60deg);
|
|
-ms-transform: rotate(225deg) skewY(-60deg);
|
|
transform: rotate(225deg) skewY(-60deg);
|
|
}
|
|
li:nth-child(9) {
|
|
-webkit-transform: rotate(255deg) skewY(-60deg);
|
|
-ms-transform: rotate(255deg) skewY(-60deg);
|
|
transform: rotate(255deg) skewY(-60deg);
|
|
}
|
|
li:nth-child(10) {
|
|
-webkit-transform: rotate(285deg) skewY(-60deg);
|
|
-ms-transform: rotate(285deg) skewY(-60deg);
|
|
transform: rotate(285deg) skewY(-60deg);
|
|
}
|
|
li:nth-child(11) {
|
|
-webkit-transform: rotate(315deg) skewY(-60deg);
|
|
-ms-transform: rotate(315deg) skewY(-60deg);
|
|
transform: rotate(315deg) skewY(-60deg);
|
|
}
|
|
li:nth-child(12) {
|
|
-webkit-transform: rotate(345deg) skewY(-60deg);
|
|
-ms-transform: rotate(345deg) skewY(-60deg);
|
|
transform: rotate(345deg) skewY(-60deg);
|
|
}
|
|
li:first-child .text {
|
|
background: green;
|
|
}
|
|
li:nth-child(2) .text {
|
|
background: tomato;
|
|
}
|
|
li:nth-child(3) .text {
|
|
background: aqua;
|
|
}
|
|
li:nth-child(4) .text {
|
|
background: yellow;
|
|
}
|
|
li:nth-child(5) .text {
|
|
background: orange;
|
|
}
|
|
li:nth-child(6) .text {
|
|
background: purple;
|
|
}
|
|
li:nth-child(7) .text {
|
|
background: cyan;
|
|
}
|
|
li:nth-child(8) .text {
|
|
background: brown;
|
|
}
|
|
li:nth-child(9) .text {
|
|
background: gray;
|
|
}
|
|
li:nth-child(10) .text {
|
|
background: pink;
|
|
}
|
|
li:nth-child(11) .text {
|
|
background: maroon;
|
|
}
|
|
li:nth-child(12) .text {
|
|
background: gold;
|
|
}
|