CSS で左上の三角形を作成するいくつかの方法の詳細な説明
|
今日は、CSS を使用して左上の三角形を記述するいくつかの方法を紹介します。 概略図（幅と高さを60pxとした場合の例）:
この種の三角形は、通常、「ダイアログ ボックス」タイプのグラフィックスの左下隅として使用されます。 最初のもの:
#三角形-上左 {
境界線: 30px 実線 #e6686e;
高さ: 0;
幅: 0;
右境界線の色: 透明;
境界線下部の色: 透明;
}
2番目のタイプ:
#三角形-上左 {
幅: 0;
高さ: 0;
上境界線: 60px 実線 #e6686e;
border-right: 60px 透明の実線;
}
3番目のタイプ:
#三角形-上左 {
境界線: 60px 透明の実線;
幅: 0;
高さ: 0;
左境界線の色: #e6686e;
境界線の上部の幅: 0;
}
さまざまな三角形の方法やさまざまな方向の三角形を試すことができます。 よく使用される CSS グラフィックを紹介する、非常におすすめの Web サイトをご紹介します: https://css-tricks.com/the-shapes-of-css/ 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: インデックスを使用して数千万のデータを持つ MySQL のクエリ速度を最適化する
>>: WebページのレイアウトではIE6の互換性の問題を考慮する必要があります
推薦する
HTML テーブルの行間隔を変更する方法の例
HTML テーブルを使用する場合、行間隔を変更する必要がある場合がありますが、余白、パディング、折り...
MySQLでトリガーを作成する方法
この記事の例では、参考のためにMySQLトリガーを作成するための具体的なコードを共有しています。具体...
Vueはページを更新するために3つの方法を使用する
プロジェクトを作成しているときに、ユーザーがアクションを実行し、特定の状態を変更し、ページを更新して...
Vueは移動可能なフローティングボタンを実装します
この記事の例では、どこにでも移動できるフローティングボタンを実現するためのVueの具体的なコードを共...
フロントエンドの状態管理（パート2）
目次1. 再出発1.1. ストア（司書） 1.2. 状態（書籍） 1.3. アクション（図書貸出リス...
Vueルーティングナビゲーションガードの簡単な理解
目次1. グローバルガード1. グローバル前線警備2. グローバル解像度ガード3. グローバルポスト...
MySQL 8.0.22 の最新バージョンのダウンロードとインストールの超詳細なチュートリアル (Windows 64 ビット)
目次序文1. 公式サイトからMySQL 8.0.22をダウンロードする2. 環境変数を設定する3. ...
EclipseにTomcatサーバー設定を追加する方法
1. ウィンドウ -> 設定を選択してEclipseの設定パネルを開きます。 2. 「設定」ウ...
HTML をホームページとして設定し、お気に入りに追加_Powernode Java Academy
IE ブラウザで「ホームページとして設定」および「お気に入りに追加」機能を実装する方法解決：指定さ...
Vue から React への変換入門ガイド
目次デザインコンポーネント通信ライフサイクルイベント処理品格とスタイルクラススタイル条件付きレンダリ...
ズームインとズームアウトの閉じるボタンを実現する CSS (サンプル コード)
この効果はブラウザ ページで最もよく見られます。まずは効果の画像をご覧ください。 上の図に示すように...
MySQL トランザクション、分離レベル、ロックの使用例の分析
この記事では、例を使用して、MySQL トランザクション、分離レベル、およびロックの使用について説明...
MySQLの累積集計原理と使用例の分析
この記事では、例を使用して、MySQL 累積集計の原理と使用方法を説明します。ご参考までに、詳細は以...
ES6 Promiseの使い方の詳細な説明
目次約束とは何ですか?拒否の使用法キャッチの使い方すべての使用法レースの使用約束とは何ですか? Pr...
フロントエンドの状態管理（パート 1）
目次1. フロントエンドの状態管理とは何ですか? 2. ヴュークス3. バス4. ウェブストレージ序...