丸い角や鋭い角の代わりに文字を使用することに関する研究経験の共有

丸い角や鋭い角の代わりに文字を使用することに関する研究経験の共有

1. フォントと文字表示の関係

左側と右側の鋭角部分は Songti フォントで表示されます: <>
フォントの影響を受けない:<>

ここでは、左と右の鋭角な角は Arial フォントで表示されます: <>
フォントの影響を受けない:<>

左側と右側の鋭角な角は Lucida Sans Unicode で表されます: <>
フォントの影響を受けない:<>

ここで、左と右の鋭角な角は Times New Roman フォントで表示されます: <>
フォントの影響を受けない:<>

左側と右側の鋭角部分は Verdana フォントで表示されます: <>
フォントの影響を受けない:<>

ここでは、上下方向の鋭角は、小さな鋭角のソンティフォントで表されています: ˇ^
フォントの影響を受けない: ∧∨

ここでは、上下方向の鋭角は Arial フォントで、小さな鋭角の角があります: ˇ^
フォントの影響を受けません: ∧∨

上方向と下方向の鋭角は Lucida Sans Unicode フォントで、小さな鋭角: ˇ^
フォントの影響を受けません: ∧∨

上と下の鋭角部分は Times New Roman フォントで、小さな鋭角部分があります: ˇ^
フォントの影響を受けません: ∧∨

ここでは、上下方向の鋭角は Verdana フォントで、小さな鋭角の角があります: ˇ^
フォントの影響を受けない: ∧∨

こちらは45度の角度、フォントはSongtiです:

これはArialフォントで書かれた45度の鋭角の立体です:

以下は Lucida Sans Unicodeでの 45 度の角度です。

45度の角度をTimes New Romanフォントで表すと次のようになります:

45度の角度をVerdanaフォントで表すと次のようになります:

これはしっかりした鋭角の角です。フォントは Songti です: ► ◄ ▲▼

これは、しっかりした鋭角の角です。フォントは Arial です: ► ◄ ▲▼

こちらは実線の角です。フォントは Lucida Sans Unicode です: ► ◄ ▲▼

こちらは角がしっかりしていて、フォントはTimes New Romanです: ► ◄ ▲▼

これはしっかりした鋭角の角です。フォントは Verdana です: ► ◄ ▲▼

これは実線の円です。サイズが限られているため、六角形の実線のように動作します。フォントは Songti です:

これは実線の円です。サイズが限られているため、六角形の実線のように動作します。フォントは Arial です。

これは実線の円です。サイズが限られているため、六角形の実線のように動作します。フォントは Lucida Sans Unicode です。

これは実線の円です。サイズが限られているため、六角形の実線のように動作します。フォントは Times New Roman です。

これは実線の円です。サイズが限られているため、六角形の実線のように動作します。フォントは Verdana です:

ここにソンティ文字のフォントで書かれた中空の円があります:

ここに Arial フォントの白抜きの円があります:

これは Lucida Sans Unicode の白抜きの円です:

これは Times New Roman フォントの白抜きの円です:

ここに Verdana フォントの白抜きの円があります:

これは四分の一弧です。フォントは Songti です: ╰ ╯╭ ╮

Arial フォントの四分の一円は次のとおりです: ╰ ╯╭ ╮

Lucida Sans Unicode の四分の一円は次のとおりです: ╰ ╯╭ ╮

これはTimes New Romanで書かれた四分の一円です: ╰ ╯╭ ╮

ヴェルダナ語で四分の一弧は次のようになります: ╰ ╯╭ ╮

2. 四分の一円を実現する

背景色で丸みを帯びた角の効果を実現するには、4 つの角を 1/4 の実円で塗りつぶします。

CSSコード:

コードをコピー
コードは次のとおりです。

.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コード:

コードをコピー
コードは次のとおりです。

&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. 単色の背景で角丸長方形を実現する

背景色で丸みを帯びた角の効果を実現するには、4 つの角を 1/4 の実円で塗りつぶします。

4. 背景が単色で角が鋭い丸みのある長方形を実装する

四隅を四分の一の実円で塗りつぶし、鋭角な角のシンボルを追加して、鋭角な角を持つ単色の丸みを帯びた長方形を作成します。

四隅を四分の一の実円で塗りつぶし、鋭角な角のシンボルを追加して、鋭角な角を持つ単色の丸みを帯びた長方形を作成します。

5. Sina Weiboブログのコメントに、鋭角な角を持つ二重境界線の角丸長方形効果を実装する

4 つの角を 1/4 の実円で塗りつぶし、これを 1 回繰り返して、1 ピクセルずつオフセットします。鋭角の角のシンボル、上下 2 ピクセルのオフセット、長方形の二重レイヤー ラベルを追加して、最終的な二重境界線効果を実現します。

◆ ●
4 つの角を 1/4 の実円で塗りつぶし、これを 1 回繰り返して、1 ピクセルずつオフセットします。鋭角の角のシンボル、上下 2 ピクセルのオフセット、長方形の二重レイヤー ラベルを追加して、最終的な二重境界線効果を実現します。

<<:  javascript:void(0) の意味と使用例

>>:  HTML外部参照CSSファイルが効果を発揮しない理由の分析と解決

推薦する

uniapp vue および nvue カルーセル コンポーネントのサンプル コード

vueの部分は以下のとおりです。 <テンプレート> <ビュークラス="&...

...

コーディングスキルを向上させるためのJavaScriptのヒント

目次1. 一意の値をフィルタリングする2. 短絡評価2.1 シナリオ例3. ブール変換4. 文字列を...

vue+openlayer をベースにマップの集約と散乱効果を実現

目次序文:結果: 1.重合効果: 2. 散布効果:具体的な実装手順: 1. プロジェクトにOpenL...

Webデザイン講座(4):素材と表現について

<br />前回のWebデザインチュートリアル:Webデザインチュートリアル(3):デザ...

CSS3 で作成された背景グラデーションアニメーション効果

成果を達成する 実装コードhtml <h1 class="text-light&qu...

Jenkins+tomcat の自動ホットデプロイメント/再起動と発生した問題の解決策 (推奨)

1. 背景同社のプロジェクトは、これまでは手動で Maven でパッケージ化し、サーバーにアップロ...

CSSポジションの5つの異なる値の使い方の詳細な説明

位置プロパティposition プロパティは、要素に使用する配置方法のタイプ (静的、相対的、固定、...

mysql データ型変換の実装

1. 問題下図のような表があり、結果値がreference_high値より大きいデータを見つける必要...

Linux での GDB 入門チュートリアル

序文gdb は Linux で非常に便利なデバッグ ツールです。コマンドライン モードのデバッグ ツ...

MySQLのスレッド実行の急増とクエリの遅延の問題を解決する

目次背景問題の説明原因分析CPUクエリが遅い接続数分析する拡大する総括する背景新年を迎える前は、一年...

CentOS の起動時に RabbitMq ソフトウェアを自動的に起動する方法

1. /etc/init.dディレクトリに新しいrabbitmqを作成します。 [root@loca...

JS 非同期コードユニットテストの魔法 Promise

目次序文プロミスチェーンMDN エラー連鎖デフォルト処理略語非同期待機序文この記事を書いた理由は、ユ...

JS の querySelector メソッドと getElementById メソッドの違い

目次1. 概要1.1 querySelector() と querySelectorAll() の使...

Vue.js フロントエンドプロジェクト向け多言語ソリューションのアイデアと実践

目次1. 通常どのようなコンテンツを処理する必要があるか2. 基本的な考え方3. 具体的な実践の詳細...