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 で正確なフォントの色を取得する方法
>>: インターネットウェブデザインにおけるバイオニックデザインの簡単な紹介
まず、Docker とは何かを理解しましょう。 Docker は、アプリケーションをデプロイするため...
私はグレースケールの画像の方が芸術的に見えると思うので、いつもグレースケールの画像を好んで使っていま...
フロントエンド開発を行っている初心者の学生を多く見かけますが、彼らの効率は比較的遅いです。常にコード...
justify-content:space-betweenレイアウトを使用する場合、要素の最後の行に...
時には、画像上に複数の領域を設定する必要があります。マウスで画像のさまざまな領域をクリックしてさまざ...
<br />関連記事: Facebookの情報アーキテクチャの分析 元記事: http:...
innobackupex を使用してバックアップする際に MySQL がサーバーに接続できない場合は...
1. テーブル構造テーブル人id名前1あなた2あなた(スペース) 3あなた(スペース2つ) 2. ク...
背景すべては、WeChat 技術グループのクラスメートが「写真の主な色を取得する方法はあるか」と尋ね...
目次1. クエリ結果を挿入する2. 集計クエリ2.1 はじめに2.2 集計関数2.3 group b...
最近、MySQL に触れました。昨日、テーブル構造情報を格納するための新しいテーブルを作成しました。...
推奨される Docker 学習教材: https://www.runoob.com/docker/d...
さっそく、コードをお見せしましょう。コードは非常にシンプルなので、勉強すれば理解できるようになります...
1. どのような問題に直面しましたか?標準 SQL では、通常、次の SQL 挿入ステートメントを記...
この記事では、CSS フロートの特徴を紹介します。皆さんと共有し、自分用のメモとして残したいと思いま...