CSS スタイルで一般的なグラフィック効果を示すサンプルコード

一般的な基本グラフィックと私が遭遇するいくつかの小さなアイコンについて簡単に説明します。以下は CSS 効果です。

ここに画像の説明を挿入

各グラフィックのコードは次のとおりです。

四角

/*四角*/
   。四角 {
      幅: 60ピクセル;
      高さ: 60px;
      背景: 赤;
   }

丸

/*円*/ /* パーセンテージ値（30%以上）を使用できますが、Androidの下位バージョンではサポートされていません*/
   。丸 {
      幅: 60ピクセル;
      高さ: 60px;
      背景: 赤;
      -moz-border-radius: 30px;
      -webkit-border-radius: 30px;
      境界線の半径: 30px;
   }

三角形アップ

/*正三角形*/
   .三角形の上{
      幅: 0;
      境界線: 30px 赤
      左境界線: 30px 実線 rgba(0, 0, 0, 0);
      右境界線: 30px 実線 rgba(0, 0, 0, 0);
      上境界線: 30px 実線 rgba(0, 0, 0, 0);
      /* 下境界線: 30px 実線 rgba(0, 0, 0, 0);*/
   }

三角形下

/*逆三角形*/
   .三角形を下向きに{
      幅: 0;
      境界線: 30px 赤
      左境界線: 30px 実線 rgba(0, 0, 0, 0);
      右境界線: 30px 実線 rgba(0, 0, 0, 0);
      /*上境界線: 30px 実線 rgba(0, 0, 0, 0);*/
      下境界線: 30px 実線 rgba(0, 0, 0, 0);
   }

台形

/* 台形*/
   .台形{
      border-bottom: 60px 赤一色;
      border-left: 30px 透明の実線;
      border-right: 30px 透明の実線;
      高さ: 0;
      幅: 60ピクセル;
   }

平行四辺形

/*平行四辺形*/
   .平行四辺形 {
      幅: 100ピクセル;
      高さ: 60px;
      -webkit-transform: skew(20deg);
      -moz-transform:skew(20度);
      -o-transform: skew(20deg);
      背景: 赤;
   }

五角形

/*五角形*/
   .五角形{
      上マージン: 30px;
      位置: 相対的;
      幅: 54px;
      境界線の幅: 50px 18px 0;
      境界線のスタイル: solid;
      境界線の色: 赤 透明;
   }

   .pentagon:before {
      コンテンツ： "";
      位置: 絶対;
      高さ: 0;
      幅: 0;
      上: -85px;
      左: -18px;
      境界線の幅: 0 45px 35px;
      境界線のスタイル: solid;
      border-color: 透明 透明な赤;
   }

心臓

/*ハート型*/
   。心臓 {
      位置: 相対的;
      幅: 100ピクセル;
      高さ: 90px;
   }

   .heart:前、
   .heart:after {
      位置: 絶対;
      コンテンツ： "";
      左: 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%;
   }

   .heart:after {
      左: 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%;
   }

ダイヤモンドスクエア

  /*ダイヤモンド*/
   .ダイヤモンド{
      幅: 0;
      高さ: 0;
      境界線: 50px 透明の実線;
      境界線の下の色: 赤;
      位置: 相対的;
      上: -50px;
   }

   .diamond:後{
      コンテンツ： '';
      位置: 絶対;
      左: -50px;
      上: 50px;
      幅: 0;
      高さ: 0;
      境界線: 50px 透明の実線;
      上の境界線の色: 赤;
   }

星（5点）

/*五芒星*/
   .スターファイブ{
      マージン: 50px 0;
      位置: 相対的;
      表示: ブロック;
      色: 赤;
      幅: 0;
      高さ: 0;
      border-right: 100px 透明の実線;
      border-bottom: 70px 赤一色;
      border-left: 100px 透明の実線;
      -moz-transform:回転(35度);
      -webkit-transform: 回転(35度);
      -ms-transform:回転(35度);
      -o-transform: 回転(35度);
   }

   .star-five:before {
      border-bottom: 80px 赤一色;
      border-left: 30px 透明の実線;
      border-right: 30px 透明の実線;
      位置: 絶対;
      高さ: 0;
      幅: 0;
      上: -45px;
      左: -65px;
      表示: ブロック;
      コンテンツ： '';
      -webkit-transform: 回転(-35度);
      -moz-transform:回転(-35度);
      -ms-transform:回転(-35度);
      -o-transform: 回転(-35度);

   }

   .star-five:after {
      位置: 絶対;
      表示: ブロック;
      色: 赤;
      上: 3px;
      左: -105px;
      幅: 0;
      高さ: 0;
      border-right: 100px 透明の実線;
      border-bottom: 70px 赤一色;
      border-left: 100px 透明の実線;
      -webkit-transform: 回転(-70度);
      -moz-transform:回転(-70度);
      -ms-transform:回転(-70度);
      -o-transform: 回転(-70度);
      コンテンツ： '';
   }

月

/*月*/
   。月 {
      幅: 80ピクセル;
      高さ: 80px;
      マージン: 0 30px 20px 0;
      境界線の半径: 50%;
      ボックスの影: 15px 15px 0 0 赤;
   }

カットダイヤモンド

 /*ダイヤモンド型💎*/
   .カットダイヤモンド{
      境界線のスタイル: solid;
      border-color: 透明 透明 赤 透明;
      境界線の幅: 0 25px 25px 25px;
      高さ: 0;
      幅: 50px;
      位置: 相対的;
      マージン: 20px 0 50px 0;
   }

   .cut-diamond:after {
      コンテンツ： "";
      位置: 絶対;
      上: 25px;
      左: -25px;
      幅: 0;
      高さ: 0;
      境界線のスタイル: solid;
      border-color: 赤 透明 透明 透明;
      境界線の幅: 70px 50px 0 50px;
   }

卵

/*卵形*/
   。卵 {
      表示: ブロック;
      幅: 126ピクセル;
      高さ: 180ピクセル;
      背景色: 赤;
      -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
      境界線の半径: 50% 50% 50% 50% / 60% 60% 40% 40%;
   }

陰陽（太極の陰陽図）

/*太極拳の陰陽グラフィック*/
   .陰陽{
      幅: 96px;
      高さ: 48px;
      背景: #eee;
      境界線の色: #000;
      境界線のスタイル: solid;
      境界線の幅: 2px 2px 50px 2px;
      境界線の半径: 100%;
      位置: 相対的;
   }

   .yin-yang:before {
      コンテンツ： "";
      位置: 絶対;
      上位: 50%;
      左: 0;
      背景: #eee;
      境界線: 18px 実線 #000;
      境界線の半径: 100%;
      幅: 12px;
      高さ: 12px;
   }

   .yin-yang:after {
      コンテンツ： "";
      位置: 絶対;
      上位: 50%;
      左: 50%;
      背景: #000;
      境界線: 18px 実線 #eee;
      境界線の半径: 100%;
      幅: 12px;
      高さ: 12px;
   }

トークバブル

/*チャットボックス*/
   .トークバブル{
      幅: 120ピクセル;
      高さ: 80px;
      左マージン: 20px;
      背景: 赤;
      位置: 相対的;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      境界線の半径: 10px;
   }

虫眼鏡

/*拡大鏡*/
   .虫眼鏡{
      font-size: 10em; /* サイズを制御します。 */
      表示: インラインブロック;
      幅: 0.4em;
      高さ: 0.4em;
      境界線: 0.1em の赤実線;
      位置: 相対的;
      境界線の半径: 0.35em;
   }

   .magnifying-glass::before {
      コンテンツ： "";
      表示: インラインブロック;
      位置: 絶対;
      右: -0.25em;
      下: -0.1em;
      境界線の幅: 0;
      背景: 赤;
      幅: 0.35em;
      高さ: 0.08em;
      -webkit-transform: 回転(45度)。
      -moz-transform:回転(45度);
      -ms-transform:回転(45度);
      -o-transform: 回転(45度);
   }

CSS スタイルでの一般的なグラフィック効果の表示に関するこの記事はこれで終わりです。CSS スタイルのグラフィック効果の表示に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: Vue プロジェクトに ECharts を導入する

>>: MySQLが日付フィールドインデックスを使用しない理由の要約