Sharing of research experience on using characters instead of rounded corners and sharp corners

1. The relationship between fonts and character display

The sharp corners on the left and right sides are in Songti font: <>
Not affected by font: ＜＞

Here the sharp corners on the left and right are in Arial font: <>
Not affected by font: ＜＞

The sharp corners on the left and right sides are in Lucida Sans Unicode: <>
Not affected by font: ＜＞

The sharp corners on the left and right here are in Times New Roman font: <>
Not affected by font: ＜＞

The sharp corners on the left and right sides are in Verdana font: <>
Not affected by font: ＜＞

Here, the sharp corners in the up and down directions are in Songti font with small sharp corners: ˇ^
Not affected by font: ∧∨

Here, the sharp corners in the up and down directions are in Arial font, with small sharp corners: ˇ^
Not affected by font: ∧∨

The sharp corners in the upper and lower directions are in Lucida Sans Unicode font, small sharp corners: ˇ^
Not affected by font: ∧∨

The sharp corners in the upper and lower directions are in Times New Roman font, with small sharp corners: ˇ^
Not affected by font: ∧∨

Here the sharp corners in the up and down directions are in the Verdana font, with small sharp corners: ˇ^
Not affected by font: ∧∨

Here is a 45-degree angle, the font is Songti: ∠

Here is a 45-degree sharp-angled solid, in Arial font: ∠

Here is a 45-degree angle, in Lucida Sans Unicode :

Here is a 45-degree angle, in Times New Roman font: ∠

Here is a 45 degree angle, in Verdana font: ∠

Here is a solid sharp corner, the font is Songti: ► ◄ ▲▼

Here is the solid sharp corner, the font is Arial: ► ◄ ▲▼

Here is the solid corner, the font is Lucida Sans Unicode: ► ◄ ▲▼

Here is the solid sharp corners, the font is Times New Roman: ► ◄ ▲▼

Here is the solid sharp corner, the font is Verdana: ► ◄ ▲▼

Here is a solid circle. Due to its limited size, it behaves like a hexagonal solid. The font is Songti: ●

Here is a solid circle. Due to its limited size, it behaves like a hexagonal solid. The font is Arial: ●

Here is a solid circle. Due to its limited size, it behaves like a hexagonal solid. The font is Lucida Sans Unicode: ●

Here is a solid circle. Due to its limited size, it behaves like a hexagonal solid. The font is Times New Roman: ●

Here is a solid circle. Due to its limited size, it behaves like a hexagonal solid. The font is Verdana: ●

Here is a hollow circle with the font in Songti: ○

Here is a hollow circle with the font in Arial: ○

Here is a hollow circle in Lucida Sans Unicode: ○

Here is a hollow circle with Times New Roman font: ○

Here is a hollow circle with the font Verdana: ○

Here is a quarter arc, the font is Songti: ╰ ╯╭ ╮

Here is a quarter circle in Arial font: ╰ ╯╭ ╮

Here is a quarter circle in Lucida Sans Unicode: ╰ ╯╭ ╮

Here is a quarter circle in Times New Roman: ╰ ╯╭ ╮

Here is a quarter arc, in Verdana: ╰ ╯╭ ╮

2. Realize a quarter solid circle

Fill the four corners with a quarter solid circle to achieve a rounded corner effect with the background color.

● ● ● ●

3. Realize the rounded rectangle with solid color background

Fill the four corners with a quarter solid circle to achieve a rounded corner effect with the background color.

4. Implement a rounded rectangle with a solid background and sharp corners

Fill the four corners with a quarter solid circle and add a sharp corner symbol to create a solid color rounded rectangle with sharp corners.

5. Implement the double-border rounded rectangle effect with sharp corners for Sina Weibo blog comments

Fill the four corners with a quarter solid circle, repeat once, and offset by 1 pixel. Add a sharp corner symbol, 2 pixels up and down offset, and a rectangular double-layer label to achieve the final double-border effect.