Template:Section divider/styles.css: Difference between revisions
Template page
More actions
Created page with ".tg-section-divider { height: 14px; background-color: #000; width: 100%; clip-path: polygon(1px 0px, 0px 0px, 0px 0px, 8px 14px, 13px 14px, 22px 7px, 42px 6px, 49px 2px, 100% 2px, 100% 0px, 42px 0px, 35px 5px, 22px 6px, 13px 13px, 9px 13px); animation-name: hr; animation-duration: var(--glitched-long-duration); animation-iteration-count: infinite; animation-timing-function: linear; } .tg-section-divider:not(:empty) { gap: 1rem; white-space: nowr..." |
No edit summary |
||
(2 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
.tg-section-divider { | .tg-section-divider { | ||
height: 14px; | height: 14px; | ||
background-color: # | background-color: #555555; | ||
width: 100%; | width: 100%; | ||
clip-path: polygon(1px 0px, 0px 0px, 0px 0px, 8px 14px, 13px 14px, 22px 7px, 42px 6px, 49px 2px, 100% 2px, 100% 0px, 42px 0px, 35px 5px, 22px 6px, 13px 13px, 9px 13px); | clip-path: polygon(1px 0px, 0px 0px, 0px 0px, 8px 14px, 13px 14px, 22px 7px, 42px 6px, 49px 2px, 100% 2px, 100% 0px, 42px 0px, 35px 5px, 22px 6px, 13px 13px, 9px 13px); | ||
animation-name: hr; | animation-name: hr; | ||
animation-duration: | animation-duration: 3s; | ||
animation-iteration-count: infinite; | animation-iteration-count: infinite; | ||
animation-timing-function: linear; | animation-timing-function: linear; | ||
} | } | ||
/* | |||
.tg-section-divider:not(:empty) { | .tg-section-divider:not(:empty) { | ||
gap: 1rem; | gap: 1rem; | ||
Line 20: | Line 21: | ||
height: 1px; | height: 1px; | ||
width: 100%; | width: 100%; | ||
background-color: | background-color: #555555; | ||
} | } | ||
*/ | |||
@keyframes section-divider { | @keyframes section-divider { |
Latest revision as of 19:35, 7 June 2025
.tg-section-divider {
height: 14px;
background-color: #555555;
width: 100%;
clip-path: polygon(1px 0px, 0px 0px, 0px 0px, 8px 14px, 13px 14px, 22px 7px, 42px 6px, 49px 2px, 100% 2px, 100% 0px, 42px 0px, 35px 5px, 22px 6px, 13px 13px, 9px 13px);
animation-name: hr;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
/*
.tg-section-divider:not(:empty) {
gap: 1rem;
white-space: nowrap;
}
.tg-section-divider::before,
.tg-section-divider::after {
content: "";
height: 1px;
width: 100%;
background-color: #555555;
}
*/
@keyframes section-divider {
0% {
transform: skew(0deg);
}
15% {
transform: skew(0deg);
}
16% {
transform: skew(20deg);
}
20% {
transform: skew(20deg);
}
21% {
transform: skew(0deg);
}
100% {
right: 35px;
}
}