html {
display: grid;
height: 100%;
grid-template-rows: 100%;
}
body {
display: inherit;
grid-template-rows: 0px 100% auto;
}
body>header, body>main {
padding: 0;
}
body header {
text-align: center;
padding-inline: 80px 350px;
z-index: 1;
}
body header > * {
margin: 5px 0;
}
main {
display: grid;
grid-template-columns: minmax(0,1fr) 350px;
}
main > section {
margin-bottom: 0;
z-index: 2;
}
main > section:first-child {
margin: 100px 3rem 0 calc(80px + 3rem);
}
main > section:first-child p {
text-wrap: balance;
text-align: center;
}
main section:last-child {
display: grid;
grid-auto-rows: auto minmax(0,1fr);
height: 0;
min-height: 100%;
}
main section:last-child button {
margin: 0;
font-size: 1em;
padding: 10px;
width: 100%;
}
main section:last-child a {
text-align: center;
display: block;
font-size: 15px;
padding: 0.5em 0;
}
#demo {
min-height: 250px;
height: 40vh;
height: round(40vh,1px);
}
.cut-1,
.cut-1 {
background: linear-gradient(60deg,#8A9B0F,#CBE86B);
--g: #0000 98%,#000;
--s: 51% 51% no-repeat;
--mask:
radial-gradient(circle 40px at 0 0 ,var(--g)) 0 0 /var(--s),
radial-gradient(circle 40px at 100% 0 ,var(--g)) 100% 0 /var(--s),
radial-gradient(circle 40px at 100% 100%,var(--g)) 100% 100%/var(--s),
radial-gradient(circle 40px at 0% 100%,var(--g)) 0 100%/var(--s);
-webkit-mask: var(--mask);
mask: var(--mask);
}
.cut-2 {
position: relative;
z-index: 0;
}
.cut-2:before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(60deg,#8A9B0F,#CBE86B);
-webkit-mask: var(--mask);
mask: var(--mask);
}
.cut-3-1 {
background: linear-gradient(60deg,#8A9B0F,#CBE86B);
clip-path: var(--c);
}
.cut-3-2 {
background: linear-gradient(60deg,#8A9B0F,#CBE86B);
-webkit-mask: var(--mask);
mask: var(--mask);
}
.cut-4 {
background: linear-gradient(60deg,#8A9B0F,#CBE86B);
clip-path: var(--c);
}
.cut-4-1 {
background: linear-gradient(60deg,#8A9B0F,#CBE86B);
-webkit-mask: var(--mask);
mask: var(--mask);
}
main article {
margin: 0;
padding-block: 10px;
text-align: center;
border-radius: 0;
}
main article form {
text-align: left;
margin-bottom: 0;
}
fieldset:last-child {
margin-bottom: 0;
}
form legend {
text-decoration: underline;
font-size: 1.2em;
}
form label {
cursor: pointer;
white-space: nowrap;
}
form legend span {
display: inline-block;
margin-left: 10px;
}
form fieldset {
margin: 0;
}
main .code {
overflow: auto;
padding-bottom: 80px;
}
main .code code {
font-size: 0.75em;
cursor: text;
color: var(--pico-color);
}
pre[class*=language-] {
margin: 0;
}
.corners {
display: grid;
grid-template-columns: repeat(2,1fr);
}
.corners label:nth-last-of-type(2) {
order:2;
}
.code-e {
display: grid;
grid-template-columns: 1fr 1fr;
}
.border-type {
position: absolute;
z-index: 3;
left: 20px;
top: 100px;
display: grid;
grid-gap: 10px;
}
.border-type label {
position: relative;
width: 70px;
aspect-ratio: 1;
display: grid;
--mask-size: 18px;
}
.border-type label input {
opacity: 0;
grid-area: 1/1;
}
.border-type label span {
position: absolute;
left: 105%;
top: 50%;
translate: 0 -50%;
white-space: nowrap;
font-size: .9em;
color: #fff;
background: #000;
padding: 2px 5px;
border-radius: 5px;
pointer-events: none;
opacity: 0;
transition: .3s;
}
.border-type label:hover span {
opacity: 1;
}
.border-type label i {
grid-area: 1/1;
display: grid;
border: 1px solid var(--pico-form-element-color);
border-radius: 5px;
}
.border-type label i:before {
content: "";
display: grid;
margin: 5px;
background: var(--pico-form-element-color);
-webkit-mask: var(--mask);
mask: var(--mask);
}
.border-type label input:checked + i:before {
background: var(--pico-primary);
}
.border-type label input:checked + i {
box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
border: 1px solid var(--pico-primary);
}
.border-type label:nth-child(1) {
--mask: radial-gradient(circle var(--mask-size),#0000 98%,#000) 10000% 10000%/99.5% 99.5%;
}
.border-type label:nth-child(2) {
--b: 5px;
--g:#000 var(--b),#0000 0 calc(100% - var(--b)),#000 0;
--mask:
radial-gradient(var(--mask-size),#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)) 98%,#0000)
10000% 10000%/99.5% 99.5%,
linear-gradient(90deg,var(--g)) 50%/100% calc(100% - 2*var(--mask-size) + var(--b)) no-repeat,
linear-gradient( var(--g)) 50%/calc(100% - 2*var(--mask-size) + var(--b)) 100% no-repeat
}
.border-type label:nth-child(3) i:before{
clip-path: polygon(var(--mask-size) 0,calc(100% - var(--mask-size)) 0,100% var(--mask-size),100% calc(100% - var(--mask-size)),calc(100% - var(--mask-size)) 100%,var(--mask-size) 100%,0 calc(100% - var(--mask-size)),0 var(--mask-size));
}
.border-type label:nth-child(4) {
--b: 5px;
--g1:#000 var(--b),#0000 0 calc(100% - var(--b)),#000 0;
--g2:#0000 calc(0.707*var(--mask-size)),
#000 0 calc(0.707*var(--mask-size) + var(--b)),
#0000 0 calc(100% - 0.707*var(--mask-size) - var(--b)),
#000 0 calc(100% - 0.707*var(--mask-size)),
#0000 0;
--mask:
linear-gradient(45deg ,var(--g2)),
linear-gradient(-45deg,var(--g2)),
linear-gradient(90deg ,var(--g1)) 50%/100% calc(100% - 2*var(--mask-size)) no-repeat,
linear-gradient(180deg,var(--g1)) 50%/calc(100% - 2*var(--mask-size)) 100% no-repeat;
}
@media (max-width: 900px) {
html {
height: auto;
min-height: 100%;
}
body {
grid-template-rows: auto auto 1fr;
}
body header {
padding: 0;
order: -2;
}
main {
grid-template-columns: 1fr;
}
main .code {
padding-bottom: 15px;
}
main > section:first-child {
resize: none;
width: 100%;
border: none;
padding: 25px;
margin: auto;
}
main section:last-child {
height: auto;
}
main > section:first-child:before,
main > section:first-child:after {
content: none;
}
.border-type {
position: static;
display: flex;
justify-content: center;
}
.border-type label span {
bottom: 105%;
left: 50%;
top: auto;
translate: -50% 0;
}
.grid {
grid-template-columns: repeat(2,minmax(0,1fr));
}
}