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 で正確なフォントの色を取得する方法

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

推薦する

Docker環境を構築する簡単な方法

まず、Docker とは何かを理解しましょう。 Docker は、アプリケーションをデプロイするため...

ウェブサイトの画像にグレー効果を加える3つの方法

私はグレースケールの画像の方が芸術的に見えると思うので、いつもグレースケールの画像を好んで使っていま...

ウェブフロントエンドウェブ開発の一般的なプロセスの簡単な紹介

フロントエンド開発を行っている初心者の学生を多く見かけますが、彼らの効率は比較的遅いです。常にコード...

css3 flexレイアウト justify-content:space-between 最後の行は左揃えになります

justify-content:space-betweenレイアウトを使用する場合、要素の最後の行に...

ウェブ画像のホットリンクと座標値を設定するサンプルコード

時には、画像上に複数の領域を設定する必要があります。マウスで画像のさまざまな領域をクリックしてさまざ...

Facebook 出会い系サイトデザインのユーザー エクスペリエンス分析

<br />関連記事: Facebookの情報アーキテクチャの分析 元記事: http:...

MySQL が innobackupex を使用して接続サーバーをバックアップできない場合の解決策

innobackupex を使用してバックアップする際に MySQL がサーバーに接続できない場合は...

Mysqlクエリ条件で文字列の末尾にスペースがあっても一致しない問題の詳細な説明

1. テーブル構造テーブル人id名前1あなた2あなた(スペース) 3あなた(スペース2つ) 2. ク...

CSS を解析して画像のテーマカラー機能を抽出する (ヒント)

背景すべては、WeChat 技術グループのクラスメートが「写真の主な色を取得する方法はあるか」と尋ね...

MySQL データベースの集計クエリと結合クエリ操作

目次1. クエリ結果を挿入する2. 集計クエリ2.1 はじめに2.2 集計関数2.3 group b...

MySQL の NULL と空の文字列

最近、MySQL に触れました。昨日、テーブル構造情報を格納するための新しいテーブルを作成しました。...

Docker環境にJenkinsコンテナをインストールする詳細なチュートリアル

推奨される Docker 学習教材: https://www.runoob.com/docker/d...

CSS ハート型読み込みアニメーションのソースコードの実装

さっそく、コードをお見せしましょう。コードは非常にシンプルなので、勉強すれば理解できるようになります...

MYSQL開発パフォーマンス調査:バッチデータ挿入の最適化方法

1. どのような問題に直面しましたか?標準 SQL では、通常、次の SQL 挿入ステートメントを記...

CSSフロートの特性についての簡単な説明

この記事では、CSS フロートの特徴を紹介します。皆さんと共有し、自分用のメモとして残したいと思いま...