CSS を使ってさまざまなグラフィックを実現できるのは素晴らしいことです。画像を切り取る必要はなく、CSS だけで実現できます。 最もよく使われるのはCSSで実装された小さな三角形です #三角形を上に{ 表示:インラインブロック; 幅:0; 高さ:0; border-left:30px 透明、実線; border-right: 30px 透明の実線; border-bottom:50px 赤一色;} #下向きの三角形 { 表示:インラインブロック; 幅:0; 高さ:0; border-left:30px 透明、実線; border-right: 30px 透明の実線; border-top:50px 赤一色;} #三角形左 { 表示:インラインブロック; 幅:0; 高さ:0; border-top: 30px 透明の実線; border-right: 50px 赤一色; ボーダー下部: 30px 透明実線;} #三角形右 表示:インラインブロック; 幅:0; 高さ:0; border-top: 30px 透明の実線; border-left: 50px 赤一色; ボーダー下部: 30px 透明実線;} #三角形-上左 { 表示:インラインブロック; 幅: 0; 高さ: 0; border-top: 50px 赤一色; border-right: 50px 透明の実線; } #三角形-右上 { 表示:インラインブロック; 幅: 0; 高さ: 0; border-top: 50px 赤一色; border-left: 50px 透明の実線; } #三角形-下左 { 表示:インラインブロック; 幅: 0; 高さ: 0; border-bottom: 50px 赤一色; border-right: 50px 透明の実線; } #三角形右下 { 表示:インラインブロック; 幅: 0; 高さ: 0; border-bottom: 50px 赤一色; border-left: 50px 透明の実線; } このような小さな矢印を通じて、プロジェクトに検証プロンプト レイヤー矢印のスタイルを実装できます。これは非常に実用的であり、プロンプト レイヤー スタイルについて心配する必要がなくなります。 CSS の小さな矢印のスタイルで transparent 属性が使用されていることを確認しました。 transparent とはどういう意味でしょうか?そこで CSS リファレンス マニュアルを調べたところ、定義は次のようになりました。 完全に透明な色を指定するために使用します。
透明の意味を、透明かつ無色とまとめます。 図に示すように、三角形は実際には幅と高さが 0 の div の 4 つの境界線によって実現されます。下向き矢印を実現するには、div の左と右の境界線を透明にする必要があります (透明ですが、左と右の境界線は依然としてスペースを占有します)。 左上の矢印の背後にあるアイデアは何ですか? div の右と下の境界線は透明なので、左上隅の矢印が露出します。 CSS3 ハートシェイプ #心臓 { 位置: 相対的; 幅: 100ピクセル; 高さ: 90px; } #ハート:前、 #ハート:後{ 位置: 絶対; コンテンツ: ""; 左: 50px; 上: 0; 幅: 50px; 高さ: 80px; 背景: 赤; 境界線の半径を 50px に設定します。 境界線の半径: 50px 50px 0 0; -webkit-transform: 回転(-45度); -moz-transform:回転(-45度); -ms-transform:回転(-45度); -o-transform: 回転(-45度); 変換: 回転(-45度); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-変換原点: 0 100%; -o-変換原点: 0 100%; 変換原点: 0 100%; } #ハート:後{ 左: 0; -webkit-transform: 回転(45度)。 -moz-transform:回転(45度); -ms-transform:回転(45度); -o-transform: 回転(45度); 変換: 回転(45度); -webkit-transform-origin: 100% 100%; 変換の起点は 100% 100% です。 変換の原点を 100% に設定します。 -o-変換の原点: 100% 100%; 変換の原点:100% 100%; } CSS3 で小さな矢印のさまざまなグラフィック効果を実現する方法についての記事はこれで終わりです。CSS の小さな矢印に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: HTML でフォントの色を設定する方法と、PS を使用して HTML で正確なフォントの色を取得する方法
>>: インターネットウェブデザインにおけるバイオニックデザインの簡単な紹介
以前書いた内容が詳細さに欠けていたため、今回は修正・補足しました。ただし、以前の MySQL バージ...
1. DockerはローカルディレクトリをマウントしますDocker は、ホスト上のディレクトリをイ...
> MySQL 5.7 クラスタ マスターとスレーブをデプロイする (テストのみ)イメージバー...
Windows 7 で MySQL 5.7.17 をインストールする方法についてのグラフィック チ...
今日の Web デザインでは、非常に大きなフォントが表示される傾向があります。これらのオープンソース...
序文Linux カーネルプログラミングでは、マクロ関数 container_of(ptr, type...
質問1:インストール中に net start mysql と入力すると、次のエラー メッセージが表示...
pthread_create関数機能紹介pthread_createはUNIX環境のスレッド作成関数...
この記事では、docker pull がリセットされる問題を解決する方法を紹介し、皆さんと共有します...
Tomcatログの関係一枚の写真は千の言葉に値する! localhost.{yyyy-MM-dd}....
複雑なテーブル構造では、一部のセルが水平方向に複数のセルにまたがるため、行間属性 ROWSPAN を...
メソッドが定義されているクラスに応じて、現在のクラスへの静的参照を取得するには、self:: または...
私は通常、大手ウェブサイトの特別ページや製品リリースページを訪問するのが好きです。なぜなら、たくさん...
123WORDPRESS.COM では、さまざまな環境での MYSQL の他のバージョンのインストー...
この記事では主に、すべてのコンテナを削除する Docker stop/remove を紹介し、皆さん...