Recreando el logo 'His Dark Materials' en CSS

El logotipo de texto tiene una barra diagonal que atraviesa el texto. Colocas dos copias una encima de la otra, recortándolas con la clip-pathpropiedad.

Lo que es interesante para mí es cuántos efectos de diseño interesantes requieren múltiples copias de un elemento para hacer algo interesante. Para obtener la copia extra, al menos con texto, a veces podemos usar un pseudoelemento. Para contenido más elaborado, existe una element()función en CSS, pero está limitada a una propiedad con prefijo en Firefox. Aún así, permite cosas increíbles, como crear un minimapa de contenido extenso.

Puedes darle un estilo diferente con un pseudoelemento, lo cual fue útil aquí. Podría ser genial ver una manera de clonar elementos en una página y aplicar estilos a través de CSS... algún día.