Using Html/CSS, how to display overlapped/composed UNICODE characters (without using diacriticals marks)?

Question

Currently, I search to display 2 characters equivalent to |< and >| where

< = 0x2BC7 ⯇
> = 0x2BC8 ⯈
| = 0x6C (letter 'l')

On first message, I requested that vertical is represented by | = 0x2503 unicode character, but this character, in Arial, is not defined correctly on Chrome and on Edge Chromium.

When HTML code and style are following

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>

On Chrome browser, I get following output

The 2 left characters must be composed so that | character is linked to left point of triangle.

The 2 right characters must be composed so that | character is linked to right point of triangle.

How can I do ?

This display is use to define 4 buttons to allow navigation in a list.

For this reason, it is important that

1. all buttons have same height
2. button |< and >| have same width
3. button < and > have same width
4. all characters are centered in green rectangle
5. alls gaps between 2 successive buttons have same width

It is also important that solution proposed works on any browser.

PS: centered means that left and right paddings are equal for all characters and top and bottom paddings are also equal for all characters.

For example in this question, 2 things are not correct.

1. in first and last bloc, bar and triangle characters are not linked together
2. left padding of first bloc is too large (not= right padding)
3. right padding of last bloc is too large (not= left padding)

Answer 1

Use a font that will always render the same and rely on letter-spacing to remove the unwanted space:

.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>

Or simply use CSS to build the shape and you can easily control everything:

.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>

Answer 2

In using only CSS, I have obtained following result

This can be done using following code

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;
    }

This code fix width of bar-triangle rectangle. Changing display to inline-block is necessary to fix the width.

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

This code move bar character to the right so that left space is more large. Parameter background-color is set to transparent because background's color is set in bar-triangle rectangle.

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

This code shifts triangle's character to the left until left angle touch vertical bar.

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

As for bar-triangle, this code fixes width of triangle-bar rectangle.

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

This code increment right padding to that left-paddind and right padding are equal and composed character continue to be centered in triangle-bar rectangle.

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

This code shifts vertical bar to the left so that right's angle touches vertical bar.

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

This code set font's family.
The line-height parameter is used to grow composed character rectangle height. The font-size parameter is used to fix gap between yellow rectangle.

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

This code set backgroung's color of button's rectangle and size of character displayed in rectangles.

If line-height parameter is not used, we obtain following result

There exists perhaps another solution to avoid to use line-height but I don't find it.

Another possibility, is to replace <span class='char'> by <div>.