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 に CSS を導入するいくつかの方法の紹介
目次1. HTMLタグ要素にCSSスタイルを直接埋め込む2. HTMLのheadセクションにおけるス...
Ansible を使用した Nginx のバッチ デプロイのサンプル コード
1.1 nginxインストールパッケージとインストールスクリプトをクライアントにコピーし、スクリプト...
React 並行関数エクスペリエンス (フロントエンド並行モード)
React は、開発者が Web およびモバイルベースのアプリケーションを作成するために使用するオ...
MySQLデータベースの基礎知識と操作のまとめ
この記事では、例を使用して、MySQL データベースの基本的な知識と操作について説明します。ご参考ま...
Linux のパスワードを紛失した場合にリセットする方法
1. スタートアップメニューでは、カーソルを最初の行に移動します - eを押します 2. UTF-8...
Bootstrapはカルーセルの効果を実現します
この記事では、カルーセルマップの効果を実現するためのBootstrapの具体的なコードを参考までに共...
vue ディレクティブ v-bind の使用と注意点
目次1. v-bind: 要素の属性にデータをバインドできる2. v-bind: は次のように省略で...
さまざまな Tomcat ログと catalina.out ファイルのセグメンテーションの関係についての簡単な分析
Tomcatログの関係一枚の写真は千の言葉に値する！ localhost.{yyyy-MM-dd}....
Vue3.0プロジェクトの構築と利用プロセス
目次1. プロジェクト構築2: ディレクトリ構造3: コンポジションAPI 4: 基本的な使い方:最...
Nginx 構成 SSL および WSS 手順の紹介
目次序文1. Nginxのインストール1. Nginxをダウンロードする2. 依存関係をインストール...
CSSオーバーフローメカニズムについての簡単な説明
CSS オーバーフローのメカニズムを詳細に学ぶ必要があるのはなぜですか?実際の開発プロセスでは、コン...
jQueryは従業員情報の追加と削除の機能を実装します
この記事では、従業員情報の追加と削除の機能を実装するためのjQueryの具体的なコードを参考までに共...
Dockerでrabbitmqをデプロイする際に発生した2つの問題
1. 背景DockerでRabbitMQをデプロイする際に、次の2つの問題が発生します。問題1: ス...
レスポンシブレイアウトについて知っておくべきこと
1. はじめにレスポンシブ Web デザインにより、Web サイトは複数のデバイスと複数の画面に同時...
MySQL のクラスター化インデックスとクラスター化インデックスの成長の仕組みを理解する
このノートでは、 MySQL の B+Tree インデックスとは何ですか?クラスター化インデックスは...