英文:
Create a partially striped letter in CSS
问题
有人知道如何在CSS中实现这种效果吗？这种效果是否可能？我知道可以使用CSS Grid来解决字母的定位，但我不知道如何实现部分条纹字母。我已经研究了文本蒙版，但除了使用矢量编辑工具（例如Illustrator）创建SVG之外，我没有其他选项。
英文:
Does anyone know how to achieve this effect in CSS? Is it even possible? I know CSS Grid to solve the positioning of letters, but I have no idea how I can achieve a partially striped letter.
I have looked into text masking but other than using a vector editing tool (e.g. Illustrator) and create SVGs I see no other options.
答案1
得分: 3
除了示例中的字母 "E" 外，你可以相当简单地通过使用 CSS 来实现这一效果。
在这个代码片段中，创建了一个背景，显示了每种布局类型所需的条纹，并使用 CSS 蒙版属性将文本用于“切割”背景。
body {
background: black;
}
.letters {
font-size: 120px;
font-family: sans-serif, monospaced;
}
.letters>* {
background-size: 100% 100%, 100% 100%;
background-repeat: no-repeat, repeat;
display: inline-block;
width: fit-content;
height: fit-content;
-webkit-mask-image: linear-gradient(black, black);
mask-image: linear-gradient(black, black);
-webkit-mask-clip: text;
mask-clip: text;
color: transparent;
font-weight: bold;
background-image: var(--bg), repeating-linear-gradient(-45deg, black, black 2px, white 2px, white 4px);
}
.halftop {
--bg: linear-gradient(white 0 50%, transparent 50% 100%);
}
.halfright {
--bg: linear-gradient(to left, white 0 50%, transparent 50% 100%)
}
div.twothirds {
--bg: linear-gradient(to left, white 0 33.3333%, transparent 33.3333% 66.6666%, white 66.6666% 100%);
}
.onethird {
--bg: linear-gradient(to left, transparent 0 33.3333%, white 33.3333% 66.6666%, transparent 66.6666% 100%);
}
<body>
<div class="letters">
<div class="halftop">TO</div>
<div class="halfright">S</div>
<div class="twothirds">H</div>
<div class="onethird">H</div>
</div>
</body>
对于字母 "E" 的示例问题在于字体通常具有上升和下降的空间，行高与字符的高度不同。要实现所需的 "E" 字母切割效果，你需要准确了解所使用字体中每个字符的顶部和底部的空间。因此，这不是一个通用的解决方案，但可以作为一个有趣的尝试。
如果需要完全通用的解决方案，我怀疑你可能需要手动绘制字符，而不是使用字体。
英文:
For all but the E in your example you can achieve this fairly straightforwardly by using CSS.
What happens in this snippet is that a background is created which shows enough of the stripes for each type of layout and uses the CSS mask properties to use the text to 'cut out' the background.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
background: black;
}
.letters {
font-size: 120px;
font-family: sans-serif, monospaced;
}
.letters>* {
background-size: 100% 100%, 100% 100%;
background-repeat: no-repeat, repeat;
display: inline-block;
width: fit-content;
height: fit-content;
-webkit-mask-image: linear-gradient(black, black);
mask-image: linear-gradient(black, black);
-webkit-mask-clip: text;
mask-clip: text;
color: transparent;
font-weight: bold;
background-image: var(--bg), repeating-linear-gradient(-45deg, black, black 2px, white 2px, white 4px);
}
.halftop {
--bg: linear-gradient(white 0 50%, transparent 50% 100%);
}
.halfright {
--bg: linear-gradient(to left, white 0 50%, transparent 50% 100%)
}
div.twothirds {
--bg: linear-gradient(to left, white 0 33.3333%, transparent 33.3333% 66.6666%, white 66.6666% 100%);
}
.onethird {
--bg: linear-gradient(to left, transparent 0 33.3333%, white 33.3333% 66.6666%, transparent 66.6666% 100%);
}
<!-- language: lang-html -->
<body>
<div class="letters">
<div class="halftop">TO</div>
<div class="halfright">S</div>
<div class="twothirds">H</div>
<div class="onethird">H</div>
</div>
</body>
<!-- end snippet -->
The problem with the E example is that the fonts tend to have ascender/descender space, lineheight not the same as the height of these characters. You would have to find out for the font you are using exactly what the top and bottom 'space' for each character is to have the sort of cutout you want for the E.
So, not a general purpose solution, but interesting to work on.
I suspect you will need to actually draw the characters yourself rather than using a font if total generality is required.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论