|
|
(41 intermediate revisions by 2 users not shown) |
Line 1: |
Line 1: |
| {{#css:
| |
| .char-banner {
| |
| width: 300px;
| |
| height: 61px;
| |
| transform: skew(-13deg);
| |
| display: flex;
| |
| position: relative;
| |
| }
| |
|
| |
|
| .char-banner-image {
| |
| transform: skew(13deg);
| |
| margin-left: -7px;
| |
| }
| |
|
| |
| .char-banner::after {
| |
| content: "";
| |
| transform: skew(50deg);
| |
| display: block;
| |
| position: absolute;
| |
| background: inherit;
| |
| width: 100px;
| |
| height: 61px;
| |
| right: -50px;
| |
| z-index: 1;
| |
| }
| |
|
| |
| .char-banner-title {
| |
| transform: skew(13deg);
| |
| font-size: 1.25rem;
| |
| font-weight: 600;
| |
| letter-spacing: 0.15rem;
| |
| white-space: nowrap;
| |
| z-index: 2;
| |
| position: relative;
| |
| display: flex;
| |
| align-items: center;
| |
| padding-left: 0.5rem;
| |
| }
| |
| }}
| |
| <div class="char-banner tone-7"><div class="char-banner-image">{{Face|Aisha|4x2}}</div><div class="char-banner-title">Mystic Alchemist</div></div>
| |