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

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

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ファイルが効果を発揮しない理由の分析と解決

推薦する

docker ストレージを使用して Exit を実行すると、サーバーへのファイルのアップロードが失敗する問題と解決策

1. 問題の説明Docker コンテナにインストールされているストレージが終了状態になっているため、...

一般的なMySQLストレージエンジンの長所と短所

目次すべてのストレージエンジンを表示InnoDB ストレージ エンジンMyISAM ストレージエンジ...

Linux でパスワードの有効期限を表示および設定する方法

適切な設定を行うことで、Linux ユーザーにパスワードを定期的に変更させることができます。パスワー...

TypeScript インターフェースの紹介

目次1. インターフェース定義2. 属性2.1 オプション属性2.2 読み取り専用プロパティ3. ク...

K3s 入門ガイド - Docker で K3s を実行するための詳細なチュートリアル

k3dとは何ですか? k3d は、Docker で K3s クラスターを実行するための小さなプログ...

選択/フォーカス時にすべてのオプションをリストする現在のより良い方法

開発中にこのような要件に遭遇したので、将来使用するために記録しました。需要背景キーボード ショートカ...

Hadoopカウンターとデータクリーニングの適用

データクリーニング (ETL)コアビジネスの MapReduce プログラムを実行する前に、まずデー...

ラジオボタンと複数選択ボタンは画像を使用してスタイル設定されます

ラジオ ボタンや複数選択ボタンにスタイルを追加する方法や、ボタンを大きくする方法を尋ねる人を以前見か...

選択ドロップダウンメニューのテキストを左右にスクロールするように設定する

marquee タグを使用してフォントのスクロールを設定したいです。コードは次のように記述しましたが...

MySQL ALTERコマンドの知識ポイントのまとめ

テーブル名を変更したり、テーブル フィールドを変更したりする必要がある場合は、 MySQL ALTE...

Linux (Ubuntu 18.04) に Anaconda をインストールする詳細な手順

Anaconda は、大規模なデータ処理、予測分析、科学計算のための最も人気のある Python デ...

RoughViz を使用して Vue.js でスケッチされたチャートを視覚化する方法

導入チャートは、データ セットを読みやすくし、その各部分を区別しやすくするために使用されるデータのグ...

IDEA が Docker を統合してリモート展開を実現するための手順

1. Dockerサーバーへのリモートアクセスを有効にするdocker が配置されているリモート サ...

layui をベースにしたログインページの実装

この記事の例では、ログインページを実装するためのlayuiの具体的なコードを参考までに共有しています...

Windows 7 で MySQL 8.0.16 をインストールして使用する場合、パスワードの変更と Navicat への接続に関する問題が発生する

MySQL のインストール時にいくつかの問題が発生しました。オンラインで見つけた回答は似たようなもの...