* { margin: 0; padding: 0; } body { display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; background-color: hsl(0, 0%, 20%); } .wrap { position: relative; } .text { font-size: 20vw; line-height: .8; color: whitesmoke; text-transform: uppercase; font-weight: bold; /* background-color: pink; */ } .wrap .text:nth-child(2), .wrap .text:nth-child(3), .crack { positio
![CSSでアニメみたいに文字や画像を真っ二つ、斜めに斬るスタイルシートのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/d477d8b257120b0dede3595e28e06394012bf6ee/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201903%2F2019060201.png)