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

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.

CSS code:

Copy code
The code is as follows:

.quarter_round{display:inline-block; width:8px; height:8px; overflow:hidden; font-family:'宋体';}.quarter_round span{display:inline-block; font-size:16px; line-height:1;}.quarter_round .lt{}.quarter_round .rt{margin-left:-7px;}.quarter_round .lb{margin-top:-6px;}.quarter_round .rb{margin:-6px 0 0 -7px;}

HTML code:

Copy code
The code is as follows:

&lt;span class=&quot;quarter_round&quot;&gt;&lt;span class=&quot;lt&quot;&gt;●&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;quarter_round&quot;&gt;&lt;span class=&quot;rt&quot;&gt;●&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;quarter_round&quot;&gt;&lt;span class=&quot;lb&quot;&gt;●&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;quarter_round&quot;&gt;&lt;span class=&quot;rb&quot;&gt;●&lt;/span&gt;&lt;/span&gt;

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.

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.

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.

<<:  CSS3 overflow property explained

>>:  javascript:void(0) meaning and usage examples

Recommend

Introduction to keyword design methods in web design

Many times, we ignore the setting of the web page ...

XHTML Getting Started Tutorial: Form Tags

<br />Forms are an important channel for use...

Front-end JavaScript thoroughly understands function currying

Table of contents 1. What is currying 2. Uses of ...

MySQL green decompression version installation and configuration steps

Steps: 1. Install MySQL database 1. Download the ...

MySQL 4 common master-slave replication architectures

Table of contents One master and multiple slaves ...

Example analysis of the use of GROUP_CONCAT in MySQL

This article uses an example to describe how to u...

Linux five-step build kernel tree

Table of contents 0. The kernel tree that comes w...

CocosCreator implements skill cooling effect

CocosCreator realizes skill CD effect There are s...

Ubuntu regularly executes Python script example code

Original link: https://vien.tech/article/157 Pref...

Keep-alive multi-level routing cache problem in Vue

Table of contents 1. Problem Description 2. Cause...

MySQL uses find_in_set() function to implement where in() order sorting

This article introduces a tutorial about how to u...

Solve the group by query problem after upgrading Mysql to 5.7

Find the problem After upgrading MySQL to MySQL 5...

Summary of MySQL Architecture Knowledge Points

1. Databases and database instances In the study ...

JavaScript to achieve product query function

This article example shares the specific code of ...