文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > CSSで図形 > CSSで四角形

CSSで四角形(正方形,長方形,ひし形)を生成

CSSの四角形はdivで作成します。ひし形は「transform」で図形を変形することで簡単に作成することが出来ます。
当ページでは、実際に見ながら大きさ、幅、高さ、角度指定の三角形を作成できます。前面に文字を重ねたり、色・グラデーションを使用したデザインが指定できます。

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

いろいろ四角形を試してみよう

四角の形
四角形のサイズ
横幅
回転
高さ
傾斜
全面文字
図形の色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
グラデーション
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
使用したhtml
<div class="box" id="makeImg">
</div>
生成したCSS
<style type="text/css">
.box {
  margin       : auto;
  width        : 150px;
  height       : 150px;
  background   : linear-gradient(to bottom, #99ccff, #0059b3);
}
</style>
ページTOP
広告
広告
広告

生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP

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

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