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 透明の実線;
      上の境界線の色: 赤;
   }

/*五芒星*/
   .スターファイブ{
      マージン: 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度);
   }