| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| .container { | |
| width: 500px; | |
| margin: 4px; | |
| font-family: Ahem; | |
| font-size: 64px; | |
| line-height: 1.5; | |
| overflow: hidden; | |
| clip-path: inset(120px calc(100% - 40px) 0px 0px); | |
| } | |
| span { | |
| color: transparent; | |
| border: 15px solid gray; | |
| box-shadow: 20px 20px 0px blue inset; | |
| margin-left: -100px; | |
| } | |
| .rounded span { | |
| border-radius: 50px; | |
| } | |
| .keep_windows_happy { | |
| position: absolute; | |
| top: 234px; | |
| left: 12px; | |
| width: 40px; | |
| height: 4px; | |
| background-color: black; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <span>000000000000</span> | |
| <span>000000000000</span> | |
| <span>000000000000</span> | |
| </div> | |
| <div class="rounded container"> | |
| <span>000000000000</span> | |
| <span>000000000000</span> | |
| <span>000000000000</span> | |
| </div> | |
| <div class="keep_windows_happy" style="top: 138px;"></div> | |
| <div class="keep_windows_happy" style="top: 234px;"></div> | |
| <div class="keep_windows_happy" style="top: 430px;"></div> | |
| </body> | |
| </html> |