文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > BOXのデザイン > CSSで三角柄

CSSで三角柄の背景を作成

CSSで三角のパターンは「linear-gradient」を45度傾けて繰り返し機能を利用することで簡単に作成することが出来ます。
当ページでは、三角柄の色や大きさ、グラデーションなどを自由に指定しながら実際のデザインを確認することが出来ます。

生成された「html」「css」などのソースコードは、そのままコピー&ペーストで利用することが出来ます。

いろいろ三角柄を試してみよう

三角の大きさ
サイズ
左側の色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
グラデーション
右側の色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
使用したhtml
<div class="box">
</div>
生成したCSS
<style type="text/css">
/* --- 原稿用紙背景のBOX定義 -------------------------------- */
.box {
  margin     : auto;
  max-width  : 500px;
  height     : 200px;
                                         /* 原稿用紙模様のCSS */
  border     : 2px solid #b35900;   /* ←枠線が不要な場合は削除 */
  background-color   : #ffffff;
  background-image   : 
      linear-gradient(to right,
                         #ffffff,
                         #ffffff     10%,
                         #b35900     11%,
                         #b35900     12%,
                         transparent 13%,
                         transparent 87%,
                         #b35900     88%,
                         #b35900     89%,
                         #ffffff     90%,
                         #ffffff),
      linear-gradient(to bottom,
                         transparent,
                         transparent 97%,
                         #b35900     98%,
                         #b35900);
  background-position: right 2px top;
  background-size    : 52px 41px;
}
</style>
広告
広告
広告

生成できるホームページ・パーツ一覧
文字のデザイン・動作の生成文字のデザイン
画像のデザイン・動作の生成画像のデザイン
ボタンのデザイン・動作の生成ボタンのデザイン
入力項目のデザイン・動作の生成入力項目のデザイン
表のデザイン・動作の生成テーブルのデザイン
BOXのデザイン・動作の生成BOXのデザイン
吹き出しのデザイン・動作の生成吹き出しのデザイン
HTMLページのデザイン・動作の生成ページのデザイン
図形のデザイン・動作の生成図形のデザイン
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP

当サイト内の関連するページ

広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン