Ich versuche, ein Logo mit reinem HTML und CSS zu erstellen. Das Design ist sehr intuitiv, da es sich um eine [13x13]-Matrix handelt, die einige farbige Elemente enthält.
CSS ist sehr einfach und geringfügig. Allerdings besteht der HTML-Code aus vielen sich wiederholenden Teilen und muss DRY (Don't Repeat Yourself) sein.
body { width: 100vmin; margin: auto } logo { display: grid; grid-template-columns: repeat(13, 1fr); } s { } w { background-color: #d6d6d6; aspect-ratio: 1 } l { background-color: #d6d6d6; aspect-ratio: 1 } f { background-color: #d6d6d6; aspect-ratio: 1 }
Ich habe es mit
Gibt es eine Möglichkeit, diesen Code zu reduzieren?
Hinweis:Die Farbe sollte gleich bleiben.
如果javascript可以使用，您可以将单元格类型连接成一个字符串对象，并使用它动态构建标志。示例代码如下。
let logo = document.getElementById("logo"); logo.dataset["cells"].split('').forEach(a => logo.append(document.createElement(a)));body { width: 100vmin; margin: auto } logo { display: grid; grid-template-columns: repeat(13, 1fr); } w { background-color: #d6d6d6; aspect-ratio: 1 } l { background-color: #d6d6d6; aspect-ratio: 1 } f { background-color: #d6d6d6; aspect-ratio: 1 }根据对HTML/CSS的需求和@Temani Afif的评论，这里提供了一个SVG解决方案：
.w * { stroke:red;stroke-width:1;;fill:none;stroke-linejoin="miter"; } .l * { stroke:green;stroke-width:1;;fill:none;stroke-linejoin="miter"; } .f * { stroke:blue;stroke-width:1;;fill:none;stroke-linejoin="miter"; }