使用 Html/CSS，如何显示重叠/组合的 UNICODE 字符（不使用变音符号）？

Question

目前，我搜索显示 2 个字符，相当于 |< 和 >| where

< = 0x2BC7 ⯇
> = 0x2BC8 ⯈
| = 0x6C（字母“l”）

在第一条消息中，我要求垂直由 | = 0x2503 unicode 字符表示，但是在 Arial 中，该字符在 Chrome 和 Edge Chromium 上没有正确定义。

当 HTML 代码和样式跟随时

div.std > span.char
    {
    font-family: Arial;
    font-size:80px;
    background-color: lightgreen;
    }

<div class='std'>
    <span class='char'><span class='bar'>&nbsp;l</span><span class='triangle'>&#x2BC7;</span></span>
    <span class='char'>&#x2BC7;</span>
    <span class='char'>&#x2BC8;</span>
    <span class='char'><span class='triangle'>&#x2BC8;</span><span class='bar'>l&nbsp;</span></span>
</div>

在 Chrome 浏览器上，我得到以下输出

必须组合左边的 2 个字符，以便 | 字符链接到三角形的左点。

两个右字符必须组合在一起，以便| 字符链接到三角形的右点。

我该怎么办？

此显示用于定义 4 个按钮以允许在列表中导航。

因此，重要的是

1. 所有按钮的高度相同
2. 按钮 ||宽度相同
3. 按钮的宽度相同
4. 所有字符都以绿色矩形为中心
5. 两个连续按钮之间的所有间隙都具有相同的宽度

建议的解决方案适用于任何浏览器也很重要。

PS：居中表示所有字符的左右填充相同，所有字符的上下填充也相同。

例如在这个问题中，有两件事是不正确的。

1. 在第一个和最后一个块中，条形字符和三角形字符没有链接在一起
2. 第一个块的左填充太大（不 = 右填充）
3. 最后一个块的右填充太大（不 = 左填充）

Answer 1

在只使用 CSS 时，我得到了以下结果

这可以使用以下代码完成

span.bar-triangle
	{
	display:inline-block;
	width: 1.82ch;
	}
span.bar-triangle > span.bar
	{
	position:relative;
	padding-left:10px;
	background-color: transparent;
	}
span.bar-triangle > span.triangle
	{
	background-color: transparent;
	position:relative;
	left: -0.40ch;
	}
span.triangle-bar
	{
	display:inline-block;
	width: 1.82ch;
	}
span.triangle-bar > span.triangle
	{
	padding-right:0.24ch;
	background-color: transparent;
	}
span.triangle-bar > span.bar
	{
	position:relative;
	left: -0.60ch;
	background-color: transparent;
	}
div
	{
	font-family: Arial;
	line-height:452%;
	font-size:20
	}
div > span.char
	{
	background-color: yellow;
	font-size: 80px;
	}

<div>
    <span class='char bar-triangle'><span class='bar'>l</span><span class='triangle'>&#x2BC7;</span></span>
    <span class='char'>&#x2BC7;</span>
    <span class='char'>&#x2BC8;</span>
    <span class='char triangle-bar'><span class='triangle'>&#x2BC8;</span><span class='bar'>l</span></span>
</div>

span.bar-triangle
    {
    display:inline-block;
    width: 1.82ch;
    }

此代码修复了bar-triangle 矩形的宽度。 将display 更改为inline-block 是固定宽度所必需的。

span.bar-triangle > span.bar
    {
    position:relative;
    padding-left:10px;
    background-color: transparent;
    }

此代码将bar 字符向右移动，以使左侧空间更大。 参数background-color 设置为透明，因为背景颜色设置在bar-triangle 矩形中。

span.bar-triangle > span.triangle
    {
    background-color: transparent;
    position:relative;
    left: -0.40ch;
    }

此代码将三角形的字符向左移动，直到左角触及垂直条。

span.triangle-bar
    {
    display:inline-block;
    width: 1.82ch;
    }

对于bar-triangle，这段代码修复了triangle-bar矩形的宽度。

span.triangle-bar > span.triangle
    {
    padding-right:0.24ch;
    background-color: transparent;
    }

此代码将右填充增加到左填充和右填充相等，并且组合字符继续在triangle-bar 矩形中居中。

span.triangle-bar > span.bar
    {
    position:relative;
    left: -0.60ch;
    background-color: transparent;
    }

此代码将垂直条向左移动，以便右角接触垂直条。

div
    {
    font-family: Arial;
    line-height:452%;
    font-size:20
    }

此代码设置字体的系列。
line-height 参数用于增加组合字符矩形的高度。 font-size 参数用于修复黄色矩形之间的间隙。

div > span.char
    {
    background-color: yellow;
    font-size: 80px;
    }

此代码设置按钮矩形的背景颜色和矩形显示字符的大小。

如果不使用line-height参数，我们得到如下结果

也许存在另一种避免使用line-height 的解决方案，但我没有找到。

另一种可能性是用<div> 替换<span class='char'>。

Answer 2

使用始终呈现相同的字体并依靠letter-spacing 删除不需要的空间：

.uni {
  font-family: 'Inconsolata', monospace;
}

.uni span:first-child,
.uni span:last-child {
  letter-spacing: -0.3em;
}

<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@600&display=swap" rel="stylesheet">

<div class="uni">
  <span>&#x2503;&#x2BC7;</span>
  <span>&#x2BC7;</span>
  <span>&#x2BC8;</span>
  <span>&#x2BC8;&#x2503;</span>
</div>

<div class="uni" style="font-size:30px;">
  <span>&#x2503;&#x2BC7;</span>
  <span>&#x2BC7;</span>
  <span>&#x2BC8;</span>
  <span>&#x2BC8;&#x2503;</span>
</div>

<div class="uni" style="font-size:50px;">
  <span>&#x2503;&#x2BC7;</span>
  <span>&#x2BC7;</span>
  <span>&#x2BC8;</span>
  <span>&#x2BC8;&#x2503;</span>
</div>

或者简单地使用 CSS 来构建形状，你可以轻松控制一切：

.arrow-1 {
   width:50px;
   height:50px;
   margin:0 5px;
   display:inline-block;
   border:15px solid yellow; /* control the padding*/
   padding-left:5px; /* control the width of the bar */
   background:
     linear-gradient(#000,#000) left,
     linear-gradient(to bottom right,transparent 49.5%,#000 50%) top    content-box,
     linear-gradient(to top    right,transparent 49.5%,#000 50%) bottom content-box,
     yellow;
   background-size:
    5px 100%, /* same as padding-left */
    100% 50%,
    100% 50%;
   background-repeat:no-repeat;
}
.arrow-2 {
   width:50px;
   height:50px;
   margin:0 5px;
   display:inline-block;
   border:15px solid yellow; /* control the padding*/
   background:
     linear-gradient(to bottom right,transparent 49.5%,#000 50%) top   ,
     linear-gradient(to top    right,transparent 49.5%,#000 50%) bottom,
     yellow;
   background-size:100% 50%;
   background-repeat:no-repeat;
}

<div class="arrow-1">
</div>

<div class="arrow-2">
</div>

<div class="arrow-2" style="transform:scaleX(-1)">
</div>

<div class="arrow-1" style="transform:scaleX(-1)">
</div>