1import {css, html, LitElement} from 'lit'; 2import {customElement, property} from 'lit/decorators.js'; 3 4@customElement('ns-pyramid-sprite') 5export class PyramidSprite extends LitElement { 6 @property({type: css, attribute: 'color'}) color; 7 8 @property({type: css, attribute: 'size'}) size; 9 10 constructor() { 11 super(); 12 this.color ??= css`red`; 13 this.size ??= css`30px`; 14 } 15 16 static styles = css` 17 * { 18 margin: 0; 19 padding: 0; 20 } 21 22 :host { 23 display: block; 24 min-height: 1.5em; 25 min-width: 1.5em; 26 width: 1em; 27 perspective: 1250px; 28 } 29 .pyramid { 30 transform-style: preserve-3d; 31 transform: rotateX(-15deg) rotateY(-15deg); 32 position: absolute; 33 left: 0.25em; 34 bottom: 0.25em; 35 width: 1em; 36 height: 1em; 37 } 38 .pyramid > div { 39 background-color: var(--color); 40 position: absolute; 41 width: 100%; 42 height: 100%; 43 clip-path: polygon(50% 0, 100% 100%, 0 100%); 44 box-shadow: 0 0 0.25em #000 inset; 45 opacity: 0.7; 46 } 47 .pyramid > div:nth-child(1) { 48 transform: rotateX(30deg); 49 } 50 .pyramid > div:nth-child(2) { 51 transform: translate3d(0.25em, 0, -0.25em) rotateY(90deg) rotateX(30deg); 52 } 53 .pyramid > div:nth-child(3) { 54 transform: translate3d(0, 0, -0.5em) rotateY(180deg) rotateX(30deg); 55 } 56 .pyramid > div:nth-child(4) { 57 transform: translate3d(-0.25em, 0, -0.25em) rotateY(270deg) rotateX(30deg); 58 } 59 `; 60 61 render() { 62 return html` 63 <style> 64 :host { 65 font-size: ${this.size}; 66 --color: ${this.color}; 67 } 68 </style> 69 <div class="pyramid"> 70 <div class="face"></div> 71 <div class="face"></div> 72 <div class="face"></div> 73 <div class="face"></div> 74 </div> 75 `; 76 } 77} 78