82 lines
1.4 KiB
CSS
82 lines
1.4 KiB
CSS
.squircle {
|
|
width: 52.1em;
|
|
height: 52.1em;
|
|
position: relative;
|
|
display: inline-block;
|
|
margin: 1em auto;
|
|
vertical-align: middle;
|
|
-webkit-transform: scale(0.5);
|
|
-webkit-transform-origin: 50% 0;
|
|
}
|
|
.squircle > * {
|
|
position: absolute;
|
|
width: 100%;
|
|
display: inline-block;
|
|
height: 100%;
|
|
background: 50% 50% no-repeat;
|
|
z-index: 5;
|
|
}
|
|
.squircle:before,
|
|
.squircle:after,
|
|
.squircle > *:before,
|
|
.squircle > *:after {
|
|
position: absolute;
|
|
background: #00aeef;
|
|
}
|
|
.squircle:before {
|
|
top: 0;
|
|
left: 4em;
|
|
border-top-left-radius: 20em 10em;
|
|
width: 50%;
|
|
bottom: 0;
|
|
border-bottom-left-radius: 20em 10em;
|
|
content: "";
|
|
}
|
|
.squircle:before {
|
|
top: 0;
|
|
left: 4em;
|
|
border-top-left-radius: 80% 10em;
|
|
width: 50%;
|
|
bottom: 0;
|
|
border-bottom-left-radius: 80% 10em;
|
|
content: "";
|
|
}
|
|
.squircle:after {
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 4em;
|
|
border-top-right-radius: 80% 20%;
|
|
border-bottom-right-radius: 80% 20%;
|
|
width: 25em;
|
|
content: "";
|
|
}
|
|
.squircle > *:before {
|
|
top: 4em;
|
|
bottom: 4em;
|
|
border-top-left-radius: 100% 50%;
|
|
border-bottom-left-radius: 100% 50%;
|
|
width: 10em;
|
|
content: "";
|
|
}
|
|
.squircle > *:after {
|
|
top: 4em;
|
|
bottom: 4em;
|
|
right: 0;
|
|
border-top-right-radius: 100% 50%;
|
|
border-bottom-right-radius: 100% 50%;
|
|
width: 10em;
|
|
content: "";
|
|
z-index: 4;
|
|
}
|
|
body {
|
|
background: #1F1A1D;
|
|
}
|
|
body::before {
|
|
height: 100%;
|
|
content: '';
|
|
width: 0;
|
|
background: red;
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
}
|