CSS3は小さな矢印のさまざまなグラフィック効果を実現します

CSS3は小さな矢印のさまざまなグラフィック効果を実現します

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 リファレンス マニュアルを調べたところ、定義は次のようになりました。

完全に透明な色を指定するために使用します。

  • 透明は完全に透明な黒 (black) の省略形、つまり rgba(0,0,0,0) のような値です。
  • CSS1 では、透明な背景を示すために、transparent が background-color のパラメータ値として使用されます。
  • CSS2 では、border-color もパラメータ値として transparent を受け入れるようになりました。
  • CSS3 では、透明は色の値を持つすべてのプロパティに拡張されます。

透明の意味を、透明かつ無色とまとめます。


図に示すように、三角形は実際には幅と高さが 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 で正確なフォントの色を取得する方法

>>:  インターネットウェブデザインにおけるバイオニックデザインの簡単な紹介

推薦する

Navicat for Mysql 接続エラー 1251 (接続失敗) の問題を解決する

以前書いた内容が詳細さに欠けていたため、今回は修正・補足しました。ただし、以前の MySQL バージ...

Dockerはローカルディレクトリとデータボリュームコンテナ操作をマウントします

1. DockerはローカルディレクトリをマウントしますDocker は、ホスト上のディレクトリをイ...

Docker を使用して MySQL 5.7 および 8.0 マスター スレーブ クラスターをデプロイする方法

> MySQL 5.7 クラスタ マスターとスレーブをデプロイする (テストのみ)イメージバー...

MySQL 5.7.17 のインストールと設定方法のグラフィックチュートリアル (Win7 の場合)

Windows 7 で MySQL 5.7.17 をインストールする方法についてのグラフィック チ...

超大型フォントを使用した 40 の Web ページ デザイン

今日の Web デザインでは、非常に大きなフォントが表示される傾向があります。これらのオープンソース...

Linux カーネルプログラミングにおけるコンテナの of() 関数の紹介

序文Linux カーネルプログラミングでは、マクロ関数 container_of(ptr, type...

MySQLのインストール時に発生する可能性のある問題

質問1:インストール中に net start mysql と入力すると、次のエラー メッセージが表示...

Linux でスレッドを作成するための pthread_create の具体的な使用法

pthread_create関数機能紹介pthread_createはUNIX環境のスレッド作成関数...

docker pullがリセットされる問題を解決する

この記事では、docker pull がリセットされる問題を解決する方法を紹介し、皆さんと共有します...

さまざまな Tomcat ログと catalina.out ファイルのセグメンテーションの関係についての簡単な分析

Tomcatログの関係一枚の写真は千の言葉に値する! localhost.{yyyy-MM-dd}....

HTML テーブル タグ チュートリアル (34): 行スパン属性 ROWSPAN

複雑なテーブル構造では、一部のセルが水平方向に複数のセルにまたがるため、行間属性 ROWSPAN を...

PHP クラスにおける static と self の違いの簡単な分析

メソッドが定義されているクラスに応じて、現在のクラスへの静的参照を取得するには、self:: または...

CSS3で跳ねるボールのアニメーションを実現

私は通常、大手ウェブサイトの特別ページや製品リリースページを訪問するのが好きです。なぜなら、たくさん...

win2008R2 64 ビット システムでの mysql5.7.17 のインストールと構成の例

123WORDPRESS.COM では、さまざまな環境での MYSQL の他のバージョンのインストー...

Docker stopはすべてのコンテナを停止/削除します

この記事では主に、すべてのコンテナを削除する Docker stop/remove を紹介し、皆さん...