文本 Logo 在文本中有一条斜线切割。 您将两个副本叠加在一起，并使用 clip-path 属性裁剪这两个副本。
对我来说有趣的是，有多少酷炫的设计效果需要多个副本的元素才能实现。 为了获得额外的副本，至少对于文本来说，我们有时可以使用伪元素。 对于更复杂的內容，CSS 中有一个 element() 函数，但它仅限于 Firefox 中的前缀属性。 尽管如此，它仍然可以实现很棒的功能，例如 制作长内容的迷你地图。
您可以使用伪元素以不同的方式对其进行样式设置，这在本文中很有用。 也许看到一种方法可以在页面上克隆元素并通过 CSS 应用样式……总有一天会实现。
查看 CodePen 上 Michelle Barker 的示例
使用 CSS 制作的“黑暗物质”电视剧 Logo (@michellebarker)
在 CodePen 上。
非常酷！看起来很棒。
我知道 Chris 知道这一点，这不是一篇关于可访问性的文章，但对于任何想知道可访问性的人，请添加
aria-label="His Dark Materials"，因为伪元素会导致屏幕阅读器将其读取 3 次。我的错，我看到有一篇包含可访问性考虑的文章链接。
最重要的是，您可以将 CSS
content属性设置为attr(aria-label)，在一个属性中同时涵盖可访问性和伪内容。